如何写出高性能DOM？

为什么要写高性能DOM？

一个网站，在页面上承载最多内容的就是DOM，而且无论是我们通过加载JS、加载图片，他们也是通过写HTML标签来实现的。而我们性能优化要做的无非就是几大块：

1. 站点的网络消耗
2. DOM的初始化过程（浏览器）
3. DOM的结构以及动态操作（人为）
4. JS执行过程（浏览器）
5. JS逻辑组织（人为）

站点的网络消耗我们基本上没法控制的，而且网络环境非常复杂，我们作为一个下行的终端实际上选择不了你接触什么样的网络环境的。

DOM的初始化过程其实我们也是无法控制的，因为DOM的初始化是跟浏览器里面的DOM解析引擎相关的，它解析快解析慢我们改不了。

DOM的结构以及动态操作，这就是我们相关的。一个页面的DOM结构是我们在制作页面的时候自己来下定义的，我们可以做多层嵌套，也可以做底层嵌套，我们可以做绝对定位也可以做相对定位。动态操作就是DOM在运行到一定阶段之后。

JS执行过程跟浏览器的内核相关，它的执行快慢我们也无法改变，我们能优化的就是JS逻辑组织部分。

回流（Reflow）和重绘（Repaint）

提高高性能DOM就不得不提到回流和重绘，那么什么是回流什么是重绘？

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

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

什么情况下会触发回流和重绘？

DOM元素的添加、修改（内容）、删除（回流+重绘），仅修改DOM元素的字体颜色（只有重绘，因为不需要调整布局），回流一定触发重绘，但是重绘不一定触发回流。

现在我们知道了触发重绘和回流的触发条件，那我们为什么要避免他们？为什么避免他们高性能DOM就能够写出来呢？

如何避免触发回流和重绘

Display的值会影响布局，从而影响整个页面元素的位子发生变化，所以会更改render树的结构，先将元素从document中删除，完成修改后再把元素放回原来的位置，如果需要创建多个DOM节点，可以使用documentFragment创建完后一次性的加入document

文章来源: http://34585f3f.wiz03.com/share/s/0Qm5Y_0RRQtc2F-3Zy2piy1K0E4QKp0IAQvZ2PEFvB08u3fM