js l临时文档片段

最新推荐文章于 2024-05-13 17:26:34 发布

原创最新推荐文章于 2024-05-13 17:26:34 发布 · 526 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#随堂笔记

js 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种提高网页性能的方法，通过使用document.createDocumentFragment()创建文档片段来存储DOM元素，避免了频繁的DOM操作，从而提升了用户体验。具体实践是在遍历数据生成DOM元素时，先将这些元素添加到文档片段中，最后一次性将文档片段添加到目标DOM元素，以此减少对真实DOM的操作次数。

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

创建临时文档片段document.createDocumentFragment(); 以减少真实DOM操作次数，避免影响用户体验；

使用场景例如，遍历数据生成DOM元素添加显示到页面

// 创建临时文档片段存储li元素，避免进行多次DOM操作
var fragment = document.createDocumentFragement();
for (var i = 0; i < data.lenght; i++) {
    // 创建DOM子元素li
    var li = document.createElement('li');
    var str = `<div><span>标题<span><span>内容</span></div>`;
    li.innerHTML = str;
    fragement.appendChild(li);
}
// 获取li元素的父级DOM元素
var list = documnet.querySelector('ul.list');
list.appendChild(fragement);// 只进行一次页面DOM元素操作