JavaScript性能优化--创建文档碎片 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> JavaScript性能优化--创建文档碎片

JavaScript性能优化--创建文档碎片

浏览:1690次出处信息

Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作两年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。

在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下：

以下是代码片段：
     for(var i=0;i<5;i++){
    var op = document.createElement("span");
    var oText = document.createTextNode(i);
    op.appendChild(oText);
    document.body.appendChild(op);
    }

但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。

为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。代码如下：

以下是代码片段：
     var oFragmeng = document.createDocumentFragment();  //先创建文档碎片
    for(var i=0;i<10000;i++){
    var op = document.createElement("span");
    var oText = document.createTextNode(i);
    op.appendChild(oText);
    oFragmeng.appendChild(op); //先附加在文档碎片中
    }
    document.body.appendChild(oFragmeng);//最后一次性添加到document中

经过测试，在ie，firefox下性能明显得以提高。大家可以自己测试下。

前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。

PS：这个优化跟循环添加html代码有点类似。

建议继续学习：

碎片时间 (阅读：1668)

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：都是转义惹的祸

后一篇：JavaScript性能优化--创建表格 >>

文章信息

作者：cssrain@gmail.com(admin) 来源：前端技术
标签：碎片
发布时间：2009-12-01 23:16:34

建议继续学习

碎片时间

近3天十大热文