document.createDocumentFragment()執行效率

starof發表於2017-02-23
Fragment

createDocumentFragment作用是什麼？ 快速響應，提高效率，提升使用者體驗。

呼叫document.body.append()，每呼叫一次都要重新整理頁面 一次。效率就低了。

用document.createFragment()建立一個文件碎片，把所有的新節點附加在其上，最後把文件碎片的內容一次性新增到document中，只需要一次頁面重新整理即可。

document.createFragment()支援DOM2的方法：

a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.

也支援DOM2的屬性：

attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

下面2段程式碼測試一下效率。

一千次修改DOM加一千個段落

var d1 = new Date();

//建立一千個段落,常規的方式

for(var i = 0 ; i < 1000; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.append(oTxt);

    document.body.append(p);

}

var d2 = new Date();

console.log("第一次建立需要的時間:"+(d2.getTime()-d1.getTime()));
//第一次建立需要的時間:6

 

 

 

//使用了createDocumentFragment()的程式

var d3 = new Date();

var pFragment = document.createDocumentFragment();

for(var i = 0 ; i < 1000; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.append(oTxt);

    pFragment.append(p);

}

document.body.append(pFragment);

var d4 = new Date();

console.log("第2次建立需要的時間:"+(d4.getTime()-d3.getTime()));
//第2次建立需要的時間:3

我在chrome下執行，效率差了一半。

參考：

http://blog.sina.com.cn/s/blog_667a8c2f010113zw.html

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。

相關文章