重绘和回流

[ArthurWangCN]

• 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

• 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。

即，回流必定引发重绘，重绘不一定引发回流。回流的代价比重绘高。

[ArthurWangCN]

哪些会引起回流和重绘

回流：

• DOM的添加和删除；
• 页面的加载；
• 元素尺寸改变——边距、填充、边框、宽度和高度；
• 元素位置的改变；
• 内容变化，比如用户在input框中输入文字；
• 浏览器窗口尺寸改变——resize事件发生时；

重绘： color、border-style、visibility、background、text-decoration、outline、border-radius、box-shadow等

[ArthurWangCN]

如何减少回流和重绘

1. 集中改变样式，不要一条一条地修改 DOM 的样式。
2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3. 使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。
4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5. 动画实现的速度的选择，动画速度越快，回流次数越多