性能优化: 避免重绘与回流的实现方式
Posted 黑木令
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了性能优化: 避免重绘与回流的实现方式相关的知识,希望对你有一定的参考价值。
此文章讲解: 浏览器渲染时如何避免重绘与回流
废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
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, 才能渲染)。
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化 ” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。
如果对你有所帮助,喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。
有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。
整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。
以上是关于性能优化: 避免重绘与回流的实现方式的主要内容,如果未能解决你的问题,请参考以下文章