前端开发中的性能优化有哪些常用方法？

前端开发中性能优化有五个宗旨（排名分先后）：

1. 减少执行次数
2. 减少数据复制和序列化
3. 切换渲染引擎
4. 减少渲染次数
5. 减少网络请求次数和数据量

这是前端开发的重中之重

比如都说 react 性能差，但是 diff 性能再差执行的都是 n 最多加 log（树形）复杂度的计算

很多时候瓶颈不是在单次执行上，而是在执行次数太多上（因此需要搭配 memo、useMemo api 优化）

同样的，类似 scroll，mousemove 等事件，造成的性能瓶颈并不是触发时计算太多，而是触发的频率太高

综合运用 debounce，throttle，animationFrame，startTransition 之类的 api 才是正解

注意，将此项摆着首位是非常重要的，像前端这种 BS 架构下注定数据结构复杂度不高的场景，瓶颈往往出现在执行次数上

数据的复制，序列化成本很高，尤其是 js 这样的对象结构

同时，过高的计算成本会阻塞渲染，出现阻塞累积效应

因此，可以的话杜绝前端深浅复制是个很好的办法：

1. 预先定义数据结构，想好再开发
2. 使用不可变数据结构（immer，immutable）
3. 对于可变框架（vue），多多利用响应式 api 进行转换，少做复制

同时，如果你有持久化需求：

使用 indexedDB，会比 使用 localstorage 效率高（序列化问题，推荐 localforage 库）

更是要杜绝某些 store 库使用 localstorage 做自动持久化的方案（你以为你的卡顿怎么来的）

另外，普及 fetch api 也很有必要 （解析 json 是异步的，请求信息可以在解析前获得）

很多人都知道一个道理，给复杂交互内容的父节点加上一句：

<div style="transform: translate3d(0,0,0)">

可以大幅度优化性能

原因在于，浏览器对于2d内容采用更多利用 cpu 的渲染模式（skia），而3d内容将更多利用 gpu（webgl）

代码中只需要 css 的 transform 就可以切换渲染引擎

同时，杜绝平滑放大缩小的代码，放大缩小必须以偶数或小数点偶数的方式进行：scale(0.2)，0.4,0.8,1.2,2,4

原因是，低分辨率屏幕对于单数数字很难正确展示，图片很容易单数下模糊，配合动画，导致不是卡顿甚似卡顿的效果（win+n卡的电脑，放大缩小很多时候是会急死个人的）

前端在这一点的应用上，最多的就是虚拟列表，对于稍大数据量有奇效

重绘回流问题其实没有大家想的那么严重，你随意打开 chrome 浏览器的性能检测面板

会发现录制的渲染过程中，重绘回流过程并不清晰

原因是新一代的浏览器并没有明显的重绘回流划分，反而是更加精细化的 render compose 过程

在你切换 3d 下如果大幅修改布局，可能显著拉长的是 gpu 线程的工作块

不要以为浏览器是一成不变的，甚至新一代浏览器，setTimeout 0 的表现都是不可预测的

因为明显的虚拟列表，以及背后的思想（渲染看得到的内容，延迟图片等资源渲染属于此），减少渲染次数可以排在第四位

这一点最不重要，因为你是 bs 架构下的前端产品

当然，有人纠结 spa 还是 ssr 又或者分包加载也可以，但都不重要（网速已经不是之前的网速了）

在这样的架构下，本身数据由后端决定，加之 http2 多路复用等新技术加持，更不应该考虑太多

更多场景下，这种优化是在帮助提升服务器性能，而集群后端也不需要你为他提升这些

早期的雪碧图，webp等优化手段，这个时代也并不适用，gzip 更是很多服务器默认配置

更有甚者，graphql 等技术甚至会造成查询碎片化，明显和减少请求次数被道而驰

但是，这一个优化项能上榜的重要原因，在于前端的以下三点重磅更新：

1. pwa service worker 离线访问和访问控制
2. 浏览器集成 hevc 编解码器
3. webrtc 端到端直连

这三个功能，能让你把这个优化项玩出花来

1. 离线访问和访问控制可以让你精确控制请求和版本更新
2. h265 编码让视频的压缩传递更加方便，配合 oss、cdn，产品形态也会更丰富
3. 最后，rtc 愿景是可以直接打破 bs 架构，但现在开发 webrtc，浏览器连可用的调试界面都没有，基本只能用于局域网（或服务器伪装成浏览器），因此只是美好的未来而已

虽然排最后，但是可以战未来，如果这一项日后排第一，那前端的难度也就翻好几倍了

另外提醒一下，绝大部分应用，做好前两点，你就已经可以不胡跑个分了

前端开发如何进行性能优化？ - 古月的回答 - 知乎

前端开发如何进行性能优化？

最近用到Redux - Toolkit - RTK Query，减少了请求，设计出良好的代码，真的很有帮助，我开源出来了一个完整的项目，希望和大家共同进步

GitHub - huanghanzhilian/c-shopping: A beautiful shopping platform developed with Next.js, tailored for various devices including Desktop, Tablet, and Phone. 基于Nextjs开发同时适配Desktop、Tablet、Phone多种设备的精美购物平台

前端框架进行性能优化是一个涉及多个方面的任务，主要包括以下几个方面：

一. 代码层面

1. 代码分割：使用模块化、懒加载等技术，将代码分割成多个小块，按需加载。

2. Tree Shaking：通过编译时或运行时去除未使用的代码。

3. 使用生产版本的库文件：开发时使用的是库的开发版本，它包含了警告和完整的错误检查。而在生产环境中，应该使用压缩和优化过的库版本。

4. 减少作用域链查找：尽量减少变量的作用域，避免频繁的`this`指向调整。

5. 避免全局变量：全局变量会增加内存占用，同时影响代码的可维护性。

二. 资源加载

1. 图片优化：使用压缩、懒加载、图片优化工具（如TinyPNG）等。

2. 使用CDN：利用内容分发网络（CDN）加速静态资源的加载。

3. 文件合并与压缩：将多个文件合并为一个，并使用工具进行压缩。

三. 渲染优化

1. 虚拟DOM：虚拟DOM可以减少直接操作DOM的次数，提高渲染效率。

2. 异步渲染：使用异步组件或动态import()，使得不是所有的组件都在页面一开始就加载。

3. 服务器端渲染（SSR）或静态站点生成（SSG）：可以显著提高首屏加载速度。

4. 避免重绘和回流：例如，通过使用`display: none`来隐藏不需要渲染的元素，而不是直接删除元素。

四. 网络优化

1. HTTP/2：使用更高效的协议，如HTTP/2，它支持多路复用，可以同时发送多个请求。

2. 缓存策略：合理设置缓存策略，减少重复资源的下载。

五. 其他

1. 使用性能预算：设定应用性能的预算，如响应时间、加载时间等，并监控实际性能是否符合预算。

2. 利用浏览器开发者工具：使用浏览器的开发者工具进行性能分析，找出性能瓶颈。

3. PWA：使用渐进式网络应用程序（PWA）可提高应用的加载速度和用户体验。