Javsscript中的fragment

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

原创最新推荐文章于 2024-11-07 00:00:00 发布 · 223 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript;fragment

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

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

在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);