雅安网站建设,网站主页,城乡建设部官方网站,天然气集团有限公司原副总经理讲这个方法之前#xff0c;我们应该先了解下插入节点时浏览器会做什么。 在浏览器中#xff0c;我们一旦把节点添加到document.body#xff08;或者其他节点#xff09;中#xff0c;页面就会更新并反映出这个变化#xff0c;对于少量的更新#xff0c;一条条循… 讲这个方法之前我们应该先了解下插入节点时浏览器会做什么。 在浏览器中我们一旦把节点添加到document.body或者其他节点中页面就会更新并反映出这个变化对于少量的更新一条条循环插入也会运行很好也是我们常用的方法。代码如下 for(var i0;i5;i){ var op document.createElement(span); var oText document.createTextNode(i); op.appendChild(oText); document.body.appendChild(op); } 但是如果当我们要向document中添加大量数据时(比如1w条)如果像上面的代码一样逐条添加节点这个过程就可能会十分缓慢。 当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个div/div.但文档碎片不会产生这种节点. var oDiv document.createElement(div); for(var i0;i10000;i){ var op document.createElement(span); var oText document.createTextNode(i); op.appendChild(oText); oDiv.appendChild(op); } document.body.appendChild(oDiv); 为了解决这个问题我们可以引入createDocumentFragment()方法它的作用是创建一个文档碎片把要插入的新节点先附加在它上面然后再一次性添加到document中。代码如下 代码如下: //先创建文档碎片var oFragmeng document.createDocumentFragment(); for(var i0;i10000;i){ var op document.createElement(span); var oText document.createTextNode(i); op.appendChild(oText); //先附加在文档碎片中
oFragmeng.appendChild(op); } //最后一次性添加到document中document.body.appendChild(oFragmeng); 经过测试在iefirefox下性能明显得以提高。大家可以自己测试下。 前端性能优化都是从一些细节地方做起的如果不加以注意后果很严重。 PS这个优化跟循环添加html代码有点类似。
