JS createDocumentFragment()方法：建立檔案片段

DocumentFragment 是一個虛擬的節點型別，僅存在於記憶體中，沒有新增到文件樹中，所以看不到渲染效果。使用文件片段的好處，就是避免瀏覽器渲染和佔用資源。當文件片段設計完善後，再使用 JavaScript 一次性新增到文件樹中顯示出來，這樣可以提高效率。

主要特徵值：nodeType 值等於 11、nodeName 等於 "#document-fragment"、nodeValue 等於 null、parentNode 等於 null。

在 JavaScript 中可以使用 createDocumentFragment() 方法建立文件片段：

var fragment = document.createDocumentFragment();

使用 appendChild() 或 insertBefore() 方法可以把文件片段新增到文件樹中。

每次使用 JavaScript 操作 DOM 都會改變頁面呈現，並觸發整個頁面重新渲染（回流），從而消耗系統資源。為了解決這個問題，可以先建立一個文件片段，把所有的新節點附加到文件片段上，最後再把文件片段一次性新增到文件中，減少頁面重繪的次數。

範例

下面範例使用文件片段建立主流 Web 瀏覽器列表。

<ul id="ul"></ul>
<script>
    var element = document.getElementById('ul');
    var fragment = document.createDocumengFragment();
    var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
    browsers.forEach (function (brower) {
        var li = document.createElement('li');
        li.textContent = browser;
        fragment.appendChild(li);  //此處往文件片段插入子節點，不會引起回流
    });
    element.appendChild(fragment);  //將打包好的文件片段插入ul節點
</script>

上面範例準備為 ul 元素新增 5 個列表項。如果逐個新增列表項，將會導致瀏覽器反複渲染頁面。為避免這個問題，可以使用一個文件片段來儲存建立的列表項，然後再一次性將它們新增到文件中，這樣能夠提升系統的執行效率。