js 性能优化的tips Document.CreateDocumentFragment:
在我们使用循环插入html节点的时候,有很多做法:
大的较好的做法,如使用temp模板拼接:
但是也有很多小的应用场景,使用temp模板不方便,我们就会简单的for循环直接插入:
较常用的方法:
定义一个空数组:var str = [];
str.push()加入元素。
最后在循环结束后,使用append(str.join(""));
添加元素
因为,如果每次循环都做一次append操作,相当于每次都刷新html结构,那么这个带来的额外开销是完全没必要的。
一个较差的实现方式的demo:
for(var i=0;i<5;i++)
{
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
这个时候,我们就可以使用到文档随便的这个节点
.createDocumentFragment 来解决这个问题:
//先创建文档碎片
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);
这样其实就相当于页面的append只进行了一次,性能提升是可观的!
~~~~~~~~~~~~~
~~~~~~~~~~~~~