性能优化: 避免重绘与回流的实现方式

Posted 2021-07-27 黑木令

此文章讲解: 浏览器渲染时如何避免重绘与回流

废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 避免重绘与回流: 实现方式

 1. 使用 translate 代替 top 改变 。

 2. 使用 opacity 代替 visibility 。

 3. 不要一条一条的修改 DOM 的样式, 预先定义好 class, 然后修改 DOM 的 className 。

 4. 把 DOM 离线后修改, 比如: 先把 DOM 给 display: none (又一次 reflow), 然后你修改一百次, 然后再把它显示出来 。

 5. 不要把 DOM 节点的属性值, 放在循环里当成循环量的变量 。

 6. 不要使用 table 布局, 可能很小的一个小改动会造成整个 table 重新布局 。

 7. 动画实现的速度的选择 。

 8. 对于动画新建图层 。

 9. 启用 CPU 硬件加速 。

2. 实现方式 避免重绘与回流的原因解析

 1. 使用 translate 代替 top 改变 。
    1. top 会触发 layout 的过程, 但 translate 不会 。

 2. 使用 opacity 代替 visibility 。
    1. visibility 会触发重绘, 但 opacity 不会触发重绘 。

 3. 不要一条一条的修改 DOM 的样式, 预先定义好 class, 然后修改 DOM 的 className 。
    1. 因为每修改一条样式, 都会触发重绘, 所以我们把要修改的 dom 样式都定义在一个 className 中, 一次性完成。

 4. 把 DOM 离线后修改, 比如: 先把 DOM 给 display: none (有一次 reflow 回流), 然后你修改一百次, 然后再把它显示出来 。

 5. 不要把 DOM 节点的属性值, 放在循环里当成循环量的变量 。
    1. 回流中的缓冲机制 。

 6. 不要使用 table 布局, 可能很小的一个小改动会造成整个 table 重新布局 。
    1. 尽量使用 div 布局, 它只会影响它后面的布局不会影响它前面的布局, 但是 table 可能会影响它前面的布局 。

 7. 动画实现的速度的选择 。
    1. 影响 JS 的执行 。

 8. 对于动画新建图层 。
    1. video 、 canvas 。

 9. 启用 GPU 硬件加速 。
    1. 使用 translate 等 会使用 GPU (数据从 CPU 传输到 GPU, 才能渲染)。
    

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化 ” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。