怎么理解回流与重绘？什么场景下会触发？如何减少？

要想理解什么是回流与重绘，那我们就务必需要知道，浏览器是如何从空白页面渲染到一个结构完整样式清晰的页面的

浏览器渲染过程:

1. 解析DOM 生成DOM树 (DOM Tree)，解析CSS 生成CSS树(CSS Tree)

2. 将CSS树与DOM树结合，生成渲染树(Render Tree)

3. (layout)触发回流，根据渲染树，进行回流，得到节点的集合信息 (位置 ，大小)

4. (Painting)触发重绘，根据渲染树以及得到的集合信息，得到节点的绝对像素

5. (display)展示，将像素发送给GPU，展示在页面上

结合上面的过程，在页面渲染的初期回流的触发不可避免，回流与重绘也是至关重要的一步

当我们对DOM的修改引起了DOM几何尺寸的变化(比如元素的宽、高或隐藏元素)时，浏览器就需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对DOM的修改导致了样式的变化(color、background-color)时，却并未影响其集合属性时，就不需要重新计算元素的几何属性，只需要直接为元素重新绘制变化后的样式

总结以上几点，我们可以这样理解回流与重绘:

当对元素进行重新计算其几何属性，再重新绘制结果，就可以理解为回流；当不需要进行重新计算元素的几何属性，直接重新绘制新的样式，就可以理解为重绘；触发回流一定会触发重绘；回流包含重绘

回流触发时机

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
• 获取一些需要计算的到的属性值时，同样也会触发回流

 重绘触发时机

触发回流一定会触发重绘，除此之外还会有:

• 颜色的修改

• 文本方向的修改

• 阴影的修改

浏览器优化机制

由于每次的回流以及重绘都会引起额外的计算损耗，因此大多数浏览器会通过队列化修改并批量执行来优化重排过程。浏览器会将重排操作放到队列里，直到操作达到一个阈值或者过了一段时间，才会清空队列

但获取布局信息操作的时候，会强制队列刷新，触发回流重绘返回正确的值

如何减少

• 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
• 避免设置多项内联样式
• 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
• 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
• 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
• 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
• 避免使用 CSS 的 JavaScript 表达式

虽然我们无法避免去触发他们，但是利用以上的几点，我们可以很好的减少触发