如何写出高性能DOM？

回流（Reflow）和重绘（Repaint）

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

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

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

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

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

如何避免触发回流和重绘

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