重绘:元素样式发生变化,颜色,背景等;大小,位置不变,不会影响其他元素的大小位置。
重新绘制页面,只要页面有变化就会重绘
回流(重排):元素的大小位置发生变化,触发重新布局,导致渲染树重新计算布局和渲染。
重新排布页面结构,页面的结构布局,元素之间的位置关系发生变化
重排一定会引起重绘,而重绘不一定会重排
如何避免回流
- 放弃传统的DOM操作,使用vue/react
使用虚拟DOM,DOM 对比算法技术减少低效的DOM操作
- 分离读写操作
浏览器会优化集中的dom读或写,会将集中的读写操作一次性完成,减少回流。
所以需要尽量把读操作和写操作集中在一起
- 样式集中改变
使用class将多个样式操作集中在一起,然后使用className方法一次性添加
- 缓存布局信息
将常用的DOM信息缓存在内存中,不要每次使用时,都用document读取
- 元素批量修改(使用文档碎片或者模板字符串)
使用文档碎片将多个DOM添加入文档碎片,然后再一次性加入页面中,只引发一次回流
记得销毁文档碎片,回收垃圾
- 使用元素移动代替增删
使用appendChild等方法,移动元素代替将同一元素在一处删除后再在另一处生成
- 动画应用在脱离文档流的元素上
position设为absolute或者fixed
- 使用css3硬件加速
使用transform/opacity/filters,自动开启GPU加速,不会引发回流和重绘
- 牺牲平滑度换取速度
增加动画每次移动的偏移量,降低动画帧率,减少回流次数
- 避免使用table布局和css的JavaScript表达式