js碎片节点

Posted 我思固我在

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js碎片节点相关的知识,希望对你有一定的参考价值。

//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素
提高页面效率

 

var d1 = new Date();
//创建十个段落,常规的方式
for(var i = 0 ; i < 1000; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild (oTxt);
document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));


//使用了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.appendChild(oTxt);
pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

  


以上是关于js碎片节点的主要内容,如果未能解决你的问题,请参考以下文章

js碎片节点

笔记科普createDocumentFragment() 创建文档碎片节点

JS学习笔记DOM操作应用-创建插入和删除元素;文档碎片

碎片一个接一个

带有recyclerviews的碎片需要很长时间才能加载

在ViewPager中看不到碎片