createDocumentFragment()方法的妙用

最新推荐文章于 2025-10-01 17:32:03 发布

原创最新推荐文章于 2025-10-01 17:32:03 发布 · 873 阅读

CC 4.0 BY-SA版权

本文介绍了一种通过使用文档碎片来提高DOM操作效率的方法。当需要批量添加元素时，传统方式会导致浏览器频繁重绘，影响性能。文章展示了如何利用createDocumentFragment()创建文档碎片，并将多个新节点附加在其上，最后一次性添加到文档中，从而显著减少页面渲染次数，提升用户体验。

在更新少量节点的时候可以直接向document.body节点中添加，但是当要向document中添加大量数据时，如果直接添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法，为了解决这个问题。

可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中。

//传统的方法会进行多次页面渲染
window.onload=function (argument) {
        for (var i = 0; i < 10; i++) {
        var p =document.createElement("p");
        var data =document.createTextNode("段落");
        p.appendChild(data);
        document.body.appendChild(p);

        }
    }

使用createDocumentFragment

//新的方法
    window.onload=function (argument) {
        var cdf=document.createDocumentFragment();
        for (var i = 0; i <10; i++) {
    
            var p =document.createElement("p");
            var data=document.createTextNode("段落");
            p.appendChild(data);
            cdf.appendChild(p);

        }
            document.body.appendChild(cdf);
    }