js 性能优化tips-document.createDocumentFragment

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只进行了一次，性能提升是可观的！

~~~~~~~~~~~~~

~~~~~~~~~~~~~