性能提升之document.createDocumentFragment()

在向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(),这性能的提升也就不言而喻了!

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。