document.createDocumentFragment()运行效率

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有问题欢迎与我讨论，共同进步。