ReactJS前端性能优化6个小技巧

以下是一些提示

1. 优化图片和CSS/JS：大尺寸图片会降低扩展的运行速度。压缩图片并使用 WebP 等格式。实施懒加载，只在需要时加载图片。
2. 加速服务器请求：缓慢的服务器请求会成为性能瓶颈。使用缓存、CDN 和浏览器缓存。在本地存储数据，尽量减少不必要的 API 调用。
3. 避免不必要的重新渲染：防止组件在数据未发生变化时重新渲染。在 React 中使用 useEvent、useMemo 和 React.memo 等技术来优化呈现。
4. 优化数据存储：选择正确的数据存储方法。索引数据库非常适合在浏览器中存储大型数据集。高效管理数据，为离线访问和同步做好计划。
5. 注重用户体验：速度应改善用户体验。与用户一起测试并收集反馈，以确定需要改进的地方。优先考虑流畅、反应灵敏的界面。
6. 关注内存使用情况：高内存使用率会降低扩展和浏览器的运行速度。密切关注内存消耗情况，优化代码以减少不必要的内存使用。

遵循这些提示，就能确保前端运行良好高效，为用户带来更好的体验。

具体实现：

1. 通过 NGINX 内容缓存和 IndexedDB 优化了大图片和内容的处理。使用 Sharp 库压缩大图片，不仅可以加快加载速度，还可以节省网络数据和 RAM 使用量；将应用状态存储在 IndexedDB 中可以有效缩短重复访问的加载时间，然后，应用就可以在后台与任何 API 服务同步，并使用新数据延迟更新界面，从而采用 stale-while- revalidate 策略；对大数据使用 IndexedDB，对需要同步访问的少量数据使用 LocalStorage
2. 通过实施 Node.js 和 Express 中间件，解决了请求速度慢的问题。将远程获取的数据存储在 localStorage 缓存中。因此，只有当后续请求得到满足时，数据才会被离线访问和更新。
3. useMemo 和 useEvent 钩子等技术最大限度地减少了不必要的重新读取。
4. keep-unchanged-values 库的集成进一步提高了性能。该库专门针对常规数据获取场景而部署。它通过保持不变的值并仅更新更改的数据来防止不必要的重新渲染。