回流和重绘，浏览器(客户端)优化的重要思考方向之一，同时也将会是面试隐藏 boss，不过，要说难，排除掉浏览器底层渲染原理后也并不是那么困难。作为进阶资料，还是有必要掌握的。

　　Layout(回流)：根据渲染树，进行回流(Layout)，得到节点的几何信息(位置， 大小等)；

　　Display：将像素发送给 GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里不展开）

　　在构建渲染树的过程中，浏览器会遍历 DOM 树的可见节点并在 CSSOM 中找到对应的规则后应用，然后生成渲染树（渲染树上只存在可见节点）。

　　在构造渲染树阶段，浏览器将可见DOM节点以及它对应的样式结合起来，但是，还需要计算他们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流。比如：

　　最终，浏览器知道了所有可见节点，以及他们的样式和具体几何信息，那么接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就是重绘。

　　回流阶段主要是计算节点的位置和几何信息，那么如果页面布局和几何信息发生变化时，就需要回流。比如以下情况：

　　重绘的发生比较简单，不涉及位置和几何信息的变化触发重绘，如改变文字颜色、背景色、visibility等。

　　在现代浏览器的开发过程中都或多或少地考虑过这方面引起的性能问题，也相应地做了部分优化。大多数浏览器采用的策略是队列形式。浏览器将修改操作 push 到一个队列中，直到达到一个阈值或者达到一定的事件，进行一次清空队列并回流。但是，当我们在获取布局信息的操作的时候，会首先强制进行一次回流清空队列操作，如：

　　以上属性在调用都需要返回最新的布局信息，因此，浏览器会强行清空一次队列，触发回流来返回正确的值。因此，在修改样式的时候，尽量避免调用上面的属性，或者将其缓存起来。

　　减少对 dom 和 css 样式的修改，或者将修改合并在一次然后作用于 dom / css 上，如：

　　我们分别对 css 做了三次修改，虽然修改的是不同的方面，当这三个方面都属于几何结构，因此会引起回流。现代浏览器的优化策略可能只进行一次回流，但是旧式浏览器在面对上述代码时会触发三次回流。

　　过程一和三会引起回流，但是在后续修改中，对 DOM 的所用修改均不会引起回流，因为该元素已经不再渲染树中了。

　　如果我们直接执行的话，每一次循环都会插入一个新的节点，每次循环浏览器都会回流一次。我们使用如下的三种方式进行优化：

　　不过，批量修改DOM 这个方案在现代浏览器上用处倒不是很大，原因之前页说过，浏览器自身的优化策略；故这种方案了解即可。

　　每一个循环中，都会读取 box 的 offsetWidth 属性，这时会强制一次回流，然后设置 style.width，然后进入下一个循环。但是这边存在的性能问题是：浏览器必须先使得上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。即，每次循环都会强制浏览器刷新队列，因此，我们可以这样优化：

　　复杂动画是一定会引起回流的，但是，我们可以使用绝对定位，将其脱离文档流，限制回流影响的元素范围，即将影响控制在自身，避免父元素以及后续元素的频繁回流，这对元素繁多的 dom 树的优化是一个非常有效的手段。