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

最新推荐文章于 2022-07-07 14:59:13 发布

sunct

最新推荐文章于 2022-07-07 14:59:13 发布

阅读量269

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/sunct/article/details/81144212

版权

JavaScript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在浏览器中，一旦对文档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; //释放内存
        }