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

posted @ 2017-02-23 16:11  starof  阅读(1362)  评论(1编辑  收藏