JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

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代码有点类似。