性能提升之document.createDocumentFragment()

该文章由 leevare 发布于 ,归类于 Javascript

在向document.body中添加节点时,我们通常使用的是document.appendChild()方法,当然,这肯定没有错误,但是如果需要添加大量数据,比如说循环添加节点时,那么使用该方法就会变的十分缓慢,因为每添加一个节点都会产生一次页面渲染,所以性能也就十分低下。那么,此时的createDocumentFragment()方法就派上用场了。

document.createDocumentFragment()相当于先创建一个文档碎片,我们在添加多个节点的时候,可以先将节点附加在这个文档碎片上,然后将文档碎片一次性添加到document中,这样也就是只发生一次页面渲染,自然而然,性能也就有了显著的提升。

例如,如下的代码,当我们想创建100个段落的时候,使用常规的方式:

for (var i = 0; i < 100; i++) {
    var p = document.createElement('p');
    var txt = document.createTextNode('hello ' + i);
    p.appendChild(txt);
    document.body.appendChild(p);
}

很显然,上述代码调用了100次document.body.appendChild(),所以也就发生了100次页面渲染。那么如果使用碎片的方式,如下:

var frag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
    var p = document.createElement('p');
    var txt = document.createTextNode('hello ' + i);
    p.appendChild(txt);
    frag.appendChild(p);
}
document.body.appendChild(frag);

很明显,只执行了一次document.body.appendChild(),这性能的提升也就不言而喻了!

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒