Javsscript中的fragment

最新推荐文章于 2024-11-07 00:00:00 发布

iteye_5261

最新推荐文章于 2024-11-07 00:00:00 发布

阅读量207

点赞数

分类专栏： JavaScript 文章标签： Javascript;fragment

本文链接：https://blog.youkuaiyun.com/iteye_5261/article/details/82551089

版权

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍在JavaScript中利用DocumentFragment减少DOM插入操作带来的浏览器重新解析和渲染次数，提高页面加载速度。通过实例演示了如何在指定元素中批量插入多个元素，并分析了这种方法相较于直接插入元素在性能上的提升。

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

在Javascript中，每当对DOM执行一次操作（插入元素，删除元素等）会出发浏览器的重新解析和渲染，当我们需要一次过进行多次DOM插入操作的时候，可以借助DocumentFragment这个节点类型帮助减少浏览器的重新解析。

假设我们要在下面的<ul/>中插入10个<li/>

<ul id="ul"></ul>

一般做法：

var ul = document.getElementById("ul");
var li = null;
//循环往<ul/>插入<li/>，每次插入会出发浏览器重新渲染
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    ul.appendChild(li);
}

使用fragment：

var ul = document.getElementById("ul");
var li = null;
//使用DocumentFragment作为临时节点存放所有<li/>
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    fragment.appendChild(li);
}
//一次性把所有<li/>插入<ul/>，只出发一次浏览器重新渲染
ul.appendChild(fragment);