dom操作之文档碎片

文档碎片

在日常的工作中，避免不了我们要想一个元素中插入大量的动态元素，比如：

<ul id="box">

</ul>

在页面中有一个ul，我们随着页面的某一个事件的触发，需要向#box中插入大量的li，正常的写法为：

var oUl = document.querySelectorAll('#box')[0];
        for(var i=0;i<1000;i++){
            var oLi = document.createElement('li');
            var t = document.createTextNode(i+'');
            oLi.appendChild(t);
            oUl.appendChild(oLi);
}

这样是可以实现的，但是这样性能就无从提起了，因为每次oUl都重新绘制了一次，因为每次oUl都调用了appendChild方法，所以，就要借助一个叫文档碎片的东西，创建一个文档碎片：

var frag = document.createDocumentFragment();

然后再通过oUl加入文档碎片：

oUl.appendChild(frag);

这样也就触发了一次oUl的重新绘制,性能上会大大提高，完整代码：

        var frag = document.createDocumentFragment(),
            oLi = null,
            t = '',
            oUl = document.querySelectorAll('#box')[0];
        for(var i = 0;i < 1000;i++){
            oLi = document.createElement('li');
            t = document.createTextNode(i + '');
            oLi.appendChild(t);
            frag.appendChild(oLi);
        }
        console.log(frag);
        oUl.appendChild(frag);

当然你也可以使用字符串拼接的方式，我在这里就不在复述了！