使用Documentfragment優化DOM操做

DocumentFragment

DocumentFragment 是什麼 ？

DocumentFragment，文檔片斷接口，一個沒有父對象的最小文檔對象。它被做爲一個輕量版的 Document 使用，就像標準的 document 同樣，存儲由節點（nodes）組成的文檔結構。與 document 相比，最大的區別是 DocumentFragment 不是真實 DOM 樹的一部分，它的變化不會觸發 DOM 樹的從新渲染，且不會致使性能等問題。
———— MDN

使用場景

若是要在一個 ul 節點中一次性插入 10000 個 li 元素怎麼辦？

<ul id="parent">
  ...
</ul>

方法一

你可能第一個想到的方法，也是最簡單的方式：

var parent = document.getElementById("parent");
for (var i = 0; i < 10000; i++) {
  var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  parent.appendChild(child);
}

不過衆所周知的緣由，對 DOM 反覆操做會致使頁面重繪、迴流，效率很是低，並且頁面可能會被卡死。

方法二

固然，更多能想到的方式應該是，先創造一個 div 節點，在內存中直接操做節點，而後把全部節點都湊在一塊兒以後再跟 DOM 樹進行交互，把全部節點都串在一個 div 上，而後再把 div 掛到 DOM 樹上：

var parent = document.getElementById("parent");
var div = document.createElement("div");
for (var i = 0; i < 10000; i++) {
  var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  div.appendChild(child);
}
parent.appendChild(div);

只跟 DOM 樹交互一次，性能方面確定是大有改善的，不過額外插入了一個 div，若是說不是跟 div 之類的節點進行交互呢，好比在 table 中插入 th、td？

方法三

這個時候，就到了 DocumentFragment 上場了，翻譯過來就是文檔片斷的意思。

簡單來講就是在內存中提供了一個 DOM 對象，當咱們須要頻繁操做 DOM 的時候，能夠在內存先中建立一個 DocumentFragment 文檔片斷，而後對這個文檔片斷中進行一系列頻繁的 DOM 操做，當操做結束後直接插入真實的 DOM 節點中，這樣全部的節點會被一次插入到真實的文檔中，而這個操做僅發生一個重繪的操做。

能夠當作是上面一個例子的不須要 div 中轉版本，插入的時候，直接用其子元素替換其自己，很是完美。

var parent = document.getElementById("parent");
var frag = document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {
  var child = document.createElement("li");
  var text = document.createTextNode("" + i);
  child.appendChild(text);
  frag.appendChild(child);
}
parent.appendChild(frag);

總結

當應對於頻繁的DOM操做的場景，能夠使用DocumentFragment。