document文档碎片

var arrText = ["1","2","3","4","5","6","7","8","9","10"];

var oFragment = document.createDocumentFragment();

for(var i=0;i<arrText.length;i++) {

    var oP = document.createElement("p");

    var oText = document.createTextNode(arrText[i]);

     oP.appendChild(oText);

    oFragment.appendChild(oP);

}

document.appendChild(oFragment); 

在浏览器中，我们一旦把节点添加到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下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。

一旦把节点添加到document.body(或其后的节点)中，页面就会立即反映出这个变化。对于少量的更新，这是很好的。然而，当要向document.body添加大量数据时，如果逐个添加这些节点，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

假设你想创建十个新段落。你可能这样写：

var arrText = ["1","2","3","4","5","6","7","8","9","10"];

for(var i=0;i<arrText.length;i++) {

    var oP = document.createElement("p");

    var oText = document.createTextNode(arrText[i]);

     oP.appendChild(oText);

    document.body.appendChild(oP);

} 

这段代码运行良好，但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时，文档碎片会更高效：

var arrText = ["1","2","3","4","5","6","7","8","9","10"];

var oFragment = document.createDocumentFragment();

for(var i=0;i<arrText.length;i++) {

var oP = document.createElement("p");

var oText = document.createTextNode(arrText[i]);

oP.appendChild(oText);

oFragment.appendChild(oP);

}

document.appendChild(oFragment);

这段代码中,document.body.appendChild()仅调用了一次，这意味首只需要进行一次屏幕的刷新。