独旅网

搜索

您的当前位置：首页【web性能】重绘重排优化

【web性能】重绘重排优化

来源：独旅网

历史哲学

一、元素位置移动变化时尽量使用CSS3的transform来代替对top、left等操作

变换（transform）和透明度（opacity）的改变仅仅影响图层的组合

二、使用opacity来替代visibility

使用visibility不触发重排，但是依然重绘；
直接使用opacity既触发重绘，又出发重排（GPU底层设计如此）
opacity配合图层使用，既不触发重绘也不触发重排

三、不要使用table布局

table-cell

四、将多次改变样式属性的操作合并成一次操作

不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className

五、将DOM离线后再修改

由于display属性位none的元素不在渲染树中，对隐藏的元素操作不回引发其他元素的重排；
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次。

六、利用文档碎片（documentFragment）

Vue 使用了该种方式提升性能

七、不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量

当你请求向浏览器请求一些style信息的时候，就会让浏览器刷新队列，比如：

八、动画实现过程中，启用GPU硬件（开启图层）加速：transform: translateZ(0)

九、为动画元素新建图层，提高动画元素的z-index

因篇幅问题不能全部显示，请点此查看更多更全内容

Copyright © 2019- dcrkj.com 版权所有赣ICP备2024042791号-2

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务