回流:
触发条件:当我们对 DOM 结构的修改引发了 DOM 几何尺寸发生变化的时候,就会发生回流的过程。
例如一下几个操作:
一个 DOM 元素的几何变化,常见的几何属性 width、height、padding、margin、left、top、border 等等
使 DOM 节点发生 增减 或 移动。
读写 offset 族,scroll 族 和 client 族属性的时候,浏览器为了获取这些值,需要进行回流操作。
调用 window.getComputedStyle 方法。
回流过程:由于 DOM 的结构发生了改变,所以需要从生成 DOM 这一步开始,重新经过 样式计算、生成布局树、建立图层树、再到 生成绘制列表 以及之后的显示器显示这一整个渲染过程走一遍,开销是非常大的。
重绘:
触发条件:当 DOM 的修改导致了样式的变化,并且没有影响几何属性的时候,会导致 重绘。
重绘过程:由于没有导致 DOM 几何属性的变化,因此元素的位置信息不需要更新,所以当发生重绘的时候,会跳过 生成布局树 和建立图层树的阶段,直到生成绘制列表,然后继续进行分块、生成位图等后面一系列操作。
原文:https://www.cnblogs.com/xingguozhiming/p/13466302.html