浏览器重绘与重排

当我们在做前端开发的时候，肯定会碰到操作DOM的情况，在操作DOM的时候，就会引起浏览器的重绘与重排。

 

▍重绘

如果DOM变化仅仅影响的了visibility、outline、背景色等等非几何属性，此时就发生了重绘（repaint）而不是重排，因为布局没有发生改变。

 

▍重排

当DOM变化影响了元素的几何属性（宽、高改变等等），浏览器此时需要重新计算元素几何属性，并且页面中其他元素的几何属性可能会受影响，这样渲染树就发生了改变，也就是重新构造RenderTree渲染树，这个过程叫做重排（reflow）。

以下情况会引发重排：

• 页面初始渲染
• 添加/删除可见DOM元素
• 改变元素位置
• 改变元素尺寸（宽、高、内外边距、边框等）
• 改变元素内容（文本或图片等）
• 改变窗口尺寸

 

▍我是尾巴

重绘和重排都会影响性能（重排的影响更严重），所以，能避免的尽量避免。