重绘
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘 元素外观改变,或者重排后进行的重绘
什么情况会触发重绘
1颜色的修改
2文本方向的修改
3阴影的修改
4所有触发重排的操作都会触发重绘
回流(重排)
当dom的改变影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性 将其安放在界面中的正确位置
重新生成布局,重新排列元素
什么情况会触发重排
1添加或删除可见的DOM元素
2元素位置改变
3元素尺寸改变--->边框、填充、边距、宽高
4页面渲染初始化
任何改变元素几何属性的操作都会触发重排
如何从重排重绘角度优化性能
核心:减少重排和重绘的次数
1集中进行样式的修改
2尽量避免在遍历循环中,进行offsetTop等样式值的获取操作
3利用transform实现动画变化效果,去代替left top的变换