对于页面渲染的过程和回流，重绘概念的总结 :

• 浏览器的渲染过程 :

---

• 当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。

HTML --> DOM --> Style Rule --> Rendering Tree --> Layout --> Paint ;

1. 浏览器会将 HTML 解析成一个 DOM 树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将 CSS 解析成 CSS 规则树（Style Rule） 。
3.  根据 DOM 树和 CSS 规则树来构造 Rendering Tree（渲染树）。注意：Rendering Tree 并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
4. 有了 Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系。下一步操作称之为 Layout（布局），就是计算出每个节点在屏幕中的坐标。
5. 再下一步就是 绘制，即遍历 render 树，并使用 UI 后端层绘制每个节点。

• 回流和重绘概念 :

---

回流 (reflow)：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是 回流（也叫 重排 ）。

重绘 (repaint)：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做 重绘。

回流必将引起重绘，而重绘不一定会引起回流。

• 触发回流的条件 :

对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时 :

1. 添加或删除可见的元素；
2. 元素位置改变；
3. 元素尺寸改变：边距，填充，边框，宽度和高度；
4. 内容改变：比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5. 页面渲染初始化；
6. 浏览器窗口尺寸改变：resize 事件发生时。

• 优化(减少回流，重绘) :

• 浏览器本身的优化策略：

        因为回流造成的开销较大，所以如果每句 js 操作都去回流重绘的话，浏览器可能会受不了，所以浏览器会优化这些操作。浏览器会维护一个队列，把所有会引起回流重绘的操作放入这个队列，等队列中的操作到了一定数量或到了一定的时间间隔，浏览器就会清空队列，进行一个批处理。这样，就会让多次的回流重绘变成一次回流重绘。

• 减少对 Render Tree (渲染树)的操作 :

(合并多次 DOM 和样式的修改)，减少对一些 style 信息的请求，尽量利用好浏览器的优化策略。

1). 将多次改变样式属性的操作合并成一次操作。
2). 将多次需要重排的元素的 position 属性设为 absolute 或 fixed，这样设置会导致元素脱离文档流，它的变化不会影响到其它元素。例如有动画效果的元素最好设置为绝对定位。

•  由于 display 属性为 none 的元素不在渲染树中，对隐藏的元素操作不会引发其它元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完后再显示。这样只在隐藏和显示时触发2次重排。