日期:2014-05-16 浏览次数:20348 次
《javascript高级程序设计》第六章DOM基础突然看到文档片段,解决很有用分享一下:
在浏览器中,我们一旦把节点添加到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中添加大量数据时,每次都要产生一次页面刷新,这个时候文档片段就非常有用。
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中
?
大家可以自己测试下。前端性能优化从一些细节地方做起的。