JavaScript性能优化--创建文档碎片createDocumentFragment(转)

《javascript高级程序设计》第六章DOM基础突然看到文档片段，解决很有用分享一下： 在浏览器中，我们一旦把节点添加到document.body（或者后代节点）中，页面就会更新并反映出这个变化，对于少量的更新，这是很好的，也是我们常用的方法。代码如下：   Js代码 

Js代码   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中添加大量数据时，每次都要产生一次页面刷新，这个时候文档片段就非常有用。 createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中，这就意味着一次屏幕刷新。代码如下： Js代码 

Js代码   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中   

大家可以自己测试下。前端性能优化从一些细节地方做起的。 

转载于:https://www.cnblogs.com/sencha/p/3343147.html