如何写出高性能DOM？

回流（Reflow）和重绘（Repaint）

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

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

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

DOM元素的添加、修改（内容）、删除（回流+重绘），仅修改DOM元素的字体颜色（只有重绘，由于不须要调整布局），回流必定触发重绘，可是重绘不必定触发回流。

如今咱们知道了触发重绘和回流的触发条件，那咱们为何要避免他们？为何避免他们高性能DOM就可以写出来呢？

如何避免触发回流和重绘

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