前端-浏览器回流和重绘

回流

对于dom结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并且根据计算结果将元素放到它该出现的位置，这个过程叫做回流（reflow）。例如浏览器计算开发人员定义的float、flex、margin等，得到结果后放到头部、底部等等位置

重绘

当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容就出现了，这个过程就成为重绘（repaint）

回流和重绘的触发

DOM元素的添加、修改（内容）、删除（reflow和repaint）；

仅修改dom元素的字体颜色（只有repaint，因为不需要调整布局）

只要位置发生改变了就一定会触发reflow，只要视觉效果发生改变了就一定会触发重绘

增加边框也会触发回流和重绘

总结：回流一定触发重绘，但是重绘不一定触发回流

为什么要避免回流和重绘

如图：因为回流（reflow）和重绘（repaint）是图像生成的前一步，也是我们唯一可以控制的步骤

 

如何避免触发回流和重绘

display的值会影响布局，从而影响整个页面元素的位置变化，所以会更改render树的结构

先将元素从document中删除，完成修改后再把元素放回原来的位置

如果需要创建多个dom节点，可以使用DocumentFragment创建完后一次性的加入document