JavaScript回顾学习：利用文档碎片优化Dom性能

最新推荐文章于 2025-10-01 22:49:53 发布

原创最新推荐文章于 2025-10-01 22:49:53 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何通过使用文档碎片来减少浏览器中DOM的操作次数，从而优化页面性能。具体实践方法包括创建文档碎片并一次性添加多个元素。

在浏览器中，一旦对文档DOM进行一次添加/更新/删除操作，就会引发DOM一次重排，导致DOM性能问题。

利用文档碎片，一次性对DOM进行操作，减少文档多次重排，例子：

        window.onload = function () {
            var mydiv = document.getElementById('mydiv');
            var myul = mydiv.children[0];

            var frg = document.createDocumentFragment(); //文档碎片，内存块
            for (var i = 0; i < 10; i++) {
                var oli = document.createElement('li');
                oli.innerHTML = '' + i;
                frg.appendChild(oli);
            }

            myul.appendChild(frg);
            frg = null; //释放内存
        }