JavaScript 文檔片段

■知識點

    DocumentFragment是一個虛擬的節(jié)點類型，僅存在于內(nèi)存中，沒有添加到文檔樹，所以在網(wǎng)頁中看不到渲染效果。使用文檔片段的好處就是避免瀏覽器渲染和占用資源。當文檔片段設(shè)計完善后，再使用JavaScript—次性添加到文檔樹中顯示出來，這樣可以提高效率。

    主要特征值：nodeType 值等于11、nodeName 等于"#document-fragment"、node Value 等于 null、parentNode 等于 null。

    創(chuàng)建文檔片段的方法：

    var fragment = document.createDocumentFragment();

    使用appendChild()或insertBefore()方法可以把文檔片段添加到文檔樹中。

    每次使用JavaScript操作DOM，都會改變頁面呈現(xiàn)，并觸發(fā)整個頁面重新渲染（回流），從而消耗系統(tǒng)資源。為了解決這個問題，可以先創(chuàng)建一個文檔片段，把所有的新節(jié)點附加到文檔片段上，然后再把文檔片段一次性添加到文檔中，以減少頁面重繪的次數(shù)。

■實例設(shè)計

下面的示例使用文檔片段創(chuàng)建主流Web瀏覽器列表。

<ul id="ul"x/ul>

<script>

var element = document.getElementByld('ul');

var fragment = document.createDocumentFragment();

var browsers = ['Firefox', 'Chrome', 'Opera1, 'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {

    var li = document.createElement('li')；

    li.textContent = browser;

    fragment.appendChild(li);                   //此處往文檔片段插入子節(jié)點，不會引起回流

})；

element.appendChild(fragment);                  //將打包好的文檔片段插入ul節(jié)點

</script>

    上面的示例準備為ul元素添加5個列表項。如果逐個添加列表項，將會導(dǎo)致瀏覽器反復(fù)渲染頁面。為避免這個問題，可以使用一個文檔片段來保存創(chuàng)建的列表項，然后再一次性地將它們添加到文檔中，這樣能夠提升系統(tǒng)的執(zhí)行效率。