【面向JS--DOM加載過程】

DOM加載過程:

layout: 重新計算佈局——效率低

只要改變DOM樹上的元素，都會重新layout——效率更低

如何減少layout的次數：先在內存中拼湊要添加的DOM子樹，然後一次性掛到頁面，只會觸發一次layout——效率提高

目前前端三大框架中的 vue 與 React 採用的虛擬DOM思想，就是在極大的程度上減少了layout的次數。

把要生成的DOM存在文檔片段中，最後掛載到DOM樹上

文檔片段: 內存中臨時存儲一個DOM子樹的臨時父節點，用法和普通父節點完全一樣

可將DOM子樹整體掛到DOM樹上，但自己不出現在DOM中

何時使用: 同時添加多個平級元素時，都要先放在文檔片段中，再將文檔片段整體掛到頁面

如何使用: 3步:

1、創建文檔片段對象：
   var frag=document.createDocumentFragment();
2、將平級子元素，追加到文檔片段中
   frag.appendChild(elem)
3、將文檔片段掛到DOM樹上指定父節點下
   parent.appendChild(frag);