DOM DocumentFragment对象

最新推荐文章于 2025-08-30 22:52:48 发布

原创最新推荐文章于 2025-08-30 22:52:48 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍DocumentFragment如何作为缓存区提升DOM操作性能，避免大量重绘与回流，适用于批量创建与添加HTML元素场景。

DocumentFragment对象

一、应用场景

动态创建html元素：创建好之后直接使用appendChild()方法添加至DOM结构中
注：但是当需要创建并添加大量的元素时，这样去动态创建元素的话会导致大量的重绘以及回流，所以需要一个 ‘缓存区’ 来暂时性的保存创建的节点，然后再一次性添加到父节点中。这时，DocumentFragment对象就作为这个缓存区被使用。

最常用的方法是使用文档片段（DocumentFragment）作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore) 的方法），这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

二、w3c官方说明

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

重点就在于DocumentFragment 节点不属于文档树。因此当把创建的节点添加到该对象时，并不会导致页面的回流，因此性能就自然上去了。

三、创建DocumentFragment

var fragment = document.createDocumentFragment();

<script>
    var fragment = document.createDocumentFragment();
    var pNode;
    for(var i=1; i<=50; i++){
        pNode = document.createElement('span');
        pNode.innerText = i + ",";
        fragment.appendChild(pNode);
    }
    document.body.appendChild(fragment);
</script>

效果图：
在这里插入图片描述