前端优化--创建文档碎片(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);   } 

当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点.

var oDiv = document.createElement("div");    for(var i=0;i<10000;i++)  {       var op = document.createElement("span");       var oText = document.createTextNode(i);       op.appendChild(oText);        oDiv.appendChild(op);    }    document.body.appendChild(oDiv); 

代码如下:

//先创建文档碎片  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中  document.body.appendChild(oFragmeng); 

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

文章来源: 前端优化--创建文档碎片(document.createDocumentFragment())