Web前端性能优化——DocumentFragment或innerHTML取代复杂的元素注入

最新推荐文章于 2025-04-09 14:49:44 发布

warwolf24

最新推荐文章于 2025-04-09 14:49:44 发布

阅读量1.6k

点赞数

分类专栏：前端性能优化文章标签： web前端 html javascript CSS 性能优化

前端性能优化专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在前端开发中优化DOM操作的方法，通过使用DocumentFragment和innerHTML来减少DOM节点的创建和快速注入，从而提高页面加载速度和性能。详细介绍了这两种方法的工作原理和代码实现，并对比了它们的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM 操作对于前端性能的影响是举足轻重的，如何减少 DOM 节点的创建以及快速注入是特别重要的。

假设页面中有一个 <ul> 元素，需要动态创建多个 <li> 子节点，常规的写法是

var list = document.getElementsByTagName("ul");
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //对 li 进行操作，如添加属性，插入子节点，添加事件监听等
    list[0].appendChild(li);
}

这段代码的性能是非常差的，每一次的循环都要对 DOM 进行一次插入操作，这时应该考虑使用 DocumentFragment。

DocumentFragment 文档片段，可以包含和控制节点，但是不会占用资源，文档片段中的节点并不会存在于 DOM 树中。

var list = document.getElementsByTagName("ul");
var frag = document.createDocumentFragment();
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //对 li 进行操作，如添加属性，插入子节点，添加事件监听等。
    frag.appendChild(li);
}
list[0].appendChild(frag);

另外一种优化的方法就是使用 innerHTML：

var listStr = "";
for(var i = 0 ; i < 5 ; i ++){
    listStr += "<li>" + i + "</li>";
}
document.getElementsByTagName("ul")[0].innerHTML = listStr;

这样的方式比起 DocumentFragment 的代码量更少。

但是两种方法比起每次循环都注入HTML元素是更加高效的。

参考：http://www.gbtags.com/gb/share/1215.htm