HTML 之 DocumentFragment

最新推荐文章于 2025-05-28 08:58:31 发布

前端搬运工

最新推荐文章于 2025-05-28 08:58:31 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： HTML DocumentFragment 重绘重排

本文链接：https://blog.youkuaiyun.com/weixin_42989576/article/details/93973718

Web开发专栏收录该内容

70 篇文章

订阅专栏

本文介绍DocumentFragment接口，一种轻量级的Document替代品，用于存储XML片段而不触发浏览器重排，提高DOM操作效率。通过实例展示如何创建并使用DocumentFragment。

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

DocumentFragment（文档片段）接口表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的 XML 片段。它和 Document 最大的区别是它不是真实 DOM 树的一部分，它的改变不会触发浏览器的重绘和重排（回流），不会导致性能问题。

使用方法：可以使用 document.createDocumentFragment 方法或者构造函数来创建个空的 DocumentFragment。

 // 创建一个 DocumentFragment 节点，假设添加多个 li 标签
 var frament = document.createDocumentFragment();
 frament.appendChild('li');
 document.querySelector('ul').appendChild(frament);
 // 以上代码只会触发浏览器一次重排

MDN