对于每一个前端工程师来说，能让自己开发的网页使用起来丝滑柔顺是终极目标，但要想达到这个目标，其实是不容易的，因为既需要我们有扎实的技术基础，也需要我们在实践过程中所积累的经验
自己前段时间在做公司项目的性能优化方面的工作，在做的过程中有些收获，因此决定写这篇文章来谈谈我自己对性能优化这块的想法和思考，话不多说，开搞！
开胃小菜
在讨论具体的性能优化方案之前，我想先聊聊关于浏览器本身渲染的相关东西，因为只有了解了浏览器的渲染机制，我们才能针对性地制定优化方案，以避免"药不对症"的情况
我们都知道浏览器的刷新率是 60fps ，也就是说每帧的耗时为 16.7ms ，在这一帧之内，浏览器需要执行 js运行 ，渲染 ，布局 等一系列的任务，其中最需要关心的就是 js运行，因为js运行时间的长短很大程度上决定了页面使用的丝滑程度，所以性能优化也是多半围绕它来展开的，下面的图展示了浏览器在一帧里所做的事情
正餐
从上文得知，浏览器在一帧里做了如下的事情
- js执行
- 样式计算以及布局
- 绘制
- 合成
因此我们可以在这里的每一步里去做针对性地优化，下面一一罗列出来
js执行
- 避免 循环嵌套过多 ，嵌套深度最多不超过 2 层，如果超过两层，则可以考虑是否可以重新调整需要处理的数据，比如 树形结构 可以铺平成一个 一维数组 进行处理，节点关系通过 parentId 或者 childIds 来维护
- 要有 按需执行 的思想
- 代码打包时做 代码分割，实现加载时的按需加载
- 利用 虚拟列表，实现巨量数据的展示
- 在一些需要hover才展示的tooltip，可以在 mouseenter 时才加载tooltip组件，没有hover时则只显示 包裹的节点内容 ，当页面存在大量这种有tooltip组件的元素时，性能提升很明显
- 利用类似 intersectObserver 的api，来实现按需加载 视口内 的元素
- 需要事件监听时，利用 事件委托 来实现，避免绑定过多的监听器
- 需要实现动画时，尽量使用 requestAnimation ，而不是 setTimeout 和 setInterval
样式计算以及布局
- 尽量避免去使用会触发 回流和重绘 的方法和属性，比如：
- 访问dom节点的 width 、height 、clientWidth 、clientHeight 、scrollWidth 、scrollHeight 、offsetWidth 、offsetHeight
- 使用 getComputedStyle
- 使用 getBoundingClientRect
绘制与合成
- 利用 GPU 加速页面内容的渲染
- 使用 transform: translate3d 或者 transform: translateZ
- 使用 transform 搭配 animation
- 使用 opacity
- 对于内容会变化的元素，将其放在单独的层上，避免引起过大面积的回流
- position为 absolute 或者 fixed
- 添加 will-change 属性
- transform 不为 none
需要注意的是，图层是会额外占用内存的，因此不能无脑去新增图层，而是需要按照实际场景去决定哪些元素应该单独提到新的图层
结语
性能优化是一个非常大的话题，我在这里只是做了一个抛砖引玉，更多的优化技巧需要我们在实践中不断积累沉淀，当我们具备了足够多的优化技巧后，我相信开发出来的网页性能一定是杠杠的，所以，一起加油吧！
都看到这里啦，如果本篇文章对你有帮助，希望能 点个赞👍 支持下啦，你们的支持才是我最大的动力！😘
