搜索:
首页 >> JavaScript >> Js实例技巧 >> JavaScript性能优化--创建文档碎片

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

2009-12-4 作者:66 来源:CssRain 投递文章

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

在浏览器中,我们一旦把节点添加到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代码有点类似。

相关文章
手机版 Js实例技巧 Asp之家 Aspxhome.com
闽ICP备06017341号