如何寫出高性能DOM？

迴流（Reflow）和重繪（Repaint）

提升高性能DOM就不得不提到迴流和重繪，那麼什麼是迴流什麼是重繪？ 
迴流 
對於DOM結構中的各個元素都有本身的盒子模型，這些都須要瀏覽器根據各類樣式（瀏覽器的、開發人員定義的）來計算並根據計算結果將元素放到它該出現的位置，這個過程稱爲迴流。

重繪 
當各類盒子的位置、大小以及其餘屬性，例如顏色、字體大小等都肯定下來後，瀏覽器因而便把這些元素都按照各自的特性繪製了一遍，因而頁面的內容出現了，這個過程稱之爲重繪。

什麼狀況下會觸發迴流和重繪？

DOM元素的添加、修改（內容）、刪除（迴流+重繪），僅修改DOM元素的字體顏色（只有重繪，由於不須要調整佈局），迴流必定觸發重繪，可是重繪不必定觸發迴流。

如今咱們知道了觸發重繪和迴流的觸發條件，那咱們爲何要避免他們？爲何避免他們高性能DOM就可以寫出來呢？

如何避免觸發迴流和重繪

Display的值會影響佈局，從而影響整個頁面元素的位子發生變化，因此會更改render樹的結構，先將元素從document中刪除，完成修改後再把元素放回原來的位置，若是須要建立多個DOM節點，可使用documentFragment建立完後一次性的加入document