重排重绘

147 阅读1分钟

重绘

当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘 元素外观改变,或者重排后进行的重绘

什么情况会触发重绘

1颜色的修改

2文本方向的修改

3阴影的修改

4所有触发重排的操作都会触发重绘

回流(重排)

当dom的改变影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性 将其安放在界面中的正确位置

重新生成布局,重新排列元素

什么情况会触发重排

1添加或删除可见的DOM元素

2元素位置改变

3元素尺寸改变--->边框、填充、边距、宽高

4页面渲染初始化

任何改变元素几何属性的操作都会触发重排

如何从重排重绘角度优化性能

核心:减少重排和重绘的次数

1集中进行样式的修改

2尽量避免在遍历循环中,进行offsetTop等样式值的获取操作

3利用transform实现动画变化效果,去代替left top的变换