JavaScript 文檔片段

■知識(shí)點(diǎn)

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

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

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

    var fragment = document.createDocumentFragment();

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

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

■實(shí)例設(shè)計(jì)

下面的示例使用文檔片段創(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é)點(diǎn)，不會(huì)引起回流

})；

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

</script>

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