怎么减少重排和重绘??
首先减少获取操作
1 在for循环中,尽量不要进行样式的获取操作(因为一获取就会flush(清空)浏览器维护的队列 )
2 尽量少用sytle修改样式,通过添加class进行一次性修改样式
3 使用 translate 代替 left/top等,(translate只会触发重绘,不会引起重排,可以减少一次重排的时间)
4 使用opacity代替visibility,改透明度渲染效率更高
5 使用绝对定位或者固定定位(absolute fixed),脱离文档流不会引起页面其它盒子的变化
6 将大量需要重排操作的元素,进行display:none ,(专业术语是' 离线处理')
备注:GPU 是图形处理器,使用3d属性可以触发gpu硬件加速。
移动端的优化可以给元素添加 3d属性(比如 transform: translateZ(0)),使用3d属性可以使手机开启gpu硬件加速,让手机可以最高性能的进行渲染。
使用css精灵图片,减少图片的张数,或者使用iconfont字体图标、svg 、 base64
减少ajax请求的次数,使用webpack打包
压缩/合并js和css代码,减少代码文件的个数和体积
优化思路
1) 触发回流的耗时 > 触发重绘的耗时
- 所以 尽量避免回流 ,- 如果回流无法避免呢?
- 将频繁回流的 DOM 元素 单独作为一个 独立图层 那么这个 DOM 元素的重绘和回流只会影响 这个图层. 主要利用 transfrom 的字段来创建图层.
2) 需要注意, 图层重组也耗时 ,他的时间取决于图层的数量
- 所以需要权衡我们的页面究竟应该使用独立图层,还是放弃. 这就需要对两种方案进行测试,最后确实证明能提升性能. 浏览器的 performance 就会帮助我们测试.
备注: document.write只能重绘整个页面,innerHTML可以重绘页面的一部分