回流（重排）与重绘

[Leo-lin214]

可参考别人的好文章，后面我就做一个简单的总结而已。
浏览器的回流与重绘

定义

回流，也叫重排，当渲染树中元素的尺寸、结构、或某些位置发生改变时，浏览器需要对全部文档或部分文档进行重新渲染的过程。

重绘，当渲染树中元素某些属性的改变并不影响其位置或尺寸，又或者影响文档中其他元素时（如background、color等属性），那么浏览器不会进行重新渲染，而是简简单单地对其进行重新绘制的过程。

因此，回流一定会引起重绘，而重绘则不一定会引起回流。

浏览器如何运作回流和重绘

回流耗损的性能比重绘要大，由于在回流的过程中，需要重新对自身元素或其他元素的大小或位置进行重新计算，而重绘只会对自身元素进行简单的重新绘制而不会对其他元素进行计算。

那么，在回流或重绘过程中，浏览器的运作会是怎样的呢？

浏览器对于文档中频繁的回流或重绘过程，会将它们依次地放进一个队列中进行维护，当放进的回流或重绘过程的数量达到了队列的最大值时，便会一次性按照队列的先进先出的原则，对队列中所有的过程都进行批量处理，极大地提升操作效率。

常见的避免回流处理

对于 CSS，常见的处理如下：

1. 避免使用 table 布局（由于table布局内部相对复杂，在table布局中回流时的计算会比其他元素的计算多大概3倍时间，因此不推荐使用）

2. 避免在属性中使用表达式，如css3中的calc()、scale()等等

3. 对于使用计算的元素尽量应用在BFC中

对于 Javascript，常见的处理如下：

1. 避免频繁操作样式。对于频繁操作样式的处理，应一次性重写以及一次性更改。

2. 避免频繁操作DOM。对于需要多次操作DOM时，可使用H5中documentFragment，在其上面应用所有的DOM操作，最后一次性地添加到文档中。

3. 避免频繁读取引起回流或重绘的属性（如clientWidth、offsetWidth、width等等）。对于需要多次读取回流或重绘的属性时，应该对其进行缓存处理。