JS文档碎片

最新推荐文章于 2023-10-14 16:35:33 发布

原创最新推荐文章于 2023-10-14 16:35:33 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

javascript复习之路同时被 2 个专栏收录

87 篇文章

订阅专栏

javascript基础

77 篇文章

订阅专栏

这篇博客探讨了两种不同的DOM操作方式：直接逐个添加节点和使用文档碎片批量处理。实验结果显示，通过文档碎片预先组装节点再一次性添加到页面上能显著提高性能，减少重绘和回流。对于大量DOM操作，优化策略至关重要。

文档碎片

/* 
   创建10万个节点，添加到页面上
*/
window.onload = function(){
    //test1：82 毫秒 - 倒计时结束
    console.time("test1");
    for(var i=0;i<100000;i++)
    {
        var newDiv= document.createElement("div");
        document.body.appendChild(newDiv);
    }
    console.timeEnd("test1");


    /* 
       先创建好10万个节点，将10万个节点插入到一个节点上，最后将这一个节点添加到页面上
     */
     //test2：60 毫秒 - 倒计时结束  文档碎片
     console.time("test2");
     var node = document.createElement("div");
     for(var i=0;i<100000;i++)
     {
         var newDiv = document.createElement("div");
         node.appendChild(newDiv);
     }
     document.body.appendChild(node);
     console.timeEnd("test2")
}