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);

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


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>