[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化

讲到 Repaint（重绘）和Reflow(回流)不得不提一下 浏览器的渲染机制，请看下图：

渲染机制

浏览器解析的大概工作流
上图可以分为大概这几个个阶段：

• 解析HTML标签，构建DOM树。渲染引擎开始解析HTML文档，转换树中的HTML标签或者JS生成的标签到DOM节点，被称为 内容树。
• 构建渲染树。解析css(包括外部css文件和样式元素以及JS生成的样式）根据css选择器计算出的样式（cssom树）和DOM组合成 另外一棵树，我们叫它渲染树（render tree）。
• 布局渲染树。从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点应该出现在屏幕上几何结构的精确坐标。
• 绘制渲染树。遍历渲染树，每个节点将使用UI后端层来绘制，把每个节点绘制到屏幕上 (painting)。

定义
Reflow: 对于每个DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的，开发人员定义的）来计算并根据计算结果将元素放到它出现的位置，这个过程称为 reflow。

Repaint:当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

引起Repain和Reflow的一些操作
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
所以，下面这些动作有很大可能会是成本比较高的。

• 增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。

• 移动 DOM 的位置，或是搞个动画的时候。

• 你修改 CSS 样式的时候。

• Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。

• 修改网页的默认字体时。
  注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
  怎么优化
  Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：

• 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className

  var left = 10,
  top = 10;
  el.style.left = left + “px”;
  el.style.top = top + “px”;
  // 推荐写法
  el.className += " theclassname";

• 把 DOM 离线后修改。如：
  a> 使用 documentFragment 对象在内存里操作 DOM。
  b> 先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。
  c> clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

• 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

• 尽可能的修改层级比较低的 DOM节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。

• 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。

• 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。