添加DOM元素的优化方案(appendChild优化)

最新推荐文章于 2025-04-16 15:52:56 发布

原创最新推荐文章于 2025-04-16 15:52:56 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Javascript 同时被 2 个专栏收录

55 篇文章

订阅专栏

Web

44 篇文章

订阅专栏

本文探讨了JavaScript中DOM操作对网页性能的影响，并提供了一种优化策略来减少DOM操作次数，通过创建文档片段和批量操作来提升网页加载速度。

/*节约使用DOM
        JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。*/
view plain print ?
var  oUl = document.getElementById( "ulItem" );  
        for ( var  i=0;i<10;i++){  
            var  oLi = document.createElement( "li" );  
            oUl.appendChild(oLi);  
            oLi.appendChild(document.createTextNode("Item " +i));  
        }  

         /*以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。
        通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment()、代码如下：*/
view plain print ?
var  oUl = document.getElementById( "ulItem" );  
        var  oTemp = document.createDocumentFragment();  
        for ( var  i=0;i<10;i++){  
            var  oLi = document.createElement( "li" );  
            oLi.appendChild(document.createTextNode("Item " +i));  
            oTemp.appendChild(oLi);  
        }  
        oUl.appendChild(oTemp);