Javascript 文档片段是如何工作的？

有谁能简单地解释一下documentFragment实际上做了什么。我一直在寻找一个明确的解释，但直到现在我才得到任何解释

我读到的是，documentFragment类似于DOM结构，我们可以添加ModifyDOM元素，而不会中断文档的实际流程

我还读到，documentFragment比逐个将每个元素添加到DOM中要快。我觉得documentFragment不会每次都重新计算样式，所以速度更快

我举了两个例子

以片段方式进行：

以正常方式进行：

---

在上述两个例子中实际发生了什么？

在“片段方式”和“正常方式”之间有一个重要的区别：

使用：

constdiv=document.createElement（'div'）；
div.appendChild（document.createTextNode（'Hello'）；
div.appendChild（document.createElement（'span'））；
文件.正文.附件（div）；
console.log（div.childNodes）；//记录节点列表[#文本“Hello”，]

这将产生以下DOM结构：

你好

使用：

const frag=document.createDocumentFragment（）；
frag.appendChild（document.createTextNode（'Hello'））；
frag.appendChild（document.createElement（'span'））；
文件.正文.附件（frag）；
console.log（frag.childNodes）；//记录一个空节点列表

这将产生以下DOM结构：

你好

---

这意味着使用

DocumentFragment

实例调用

appendChild

或

insertBefore

会将文档片段的子节点移动到新的父节点。之后，文档片段为空

正如您正确提到的，创建文档片段并向其附加多个元素比逐个将这些元素附加到真实DOM更有效，从而使浏览器每次都重新呈现部分页面。因为文档片段的内容在屏幕上不可见，所以页面只需重新呈现一次

---

无论何时创建大型DOM结构，建议在文档片段中创建它，并在创建完成后将其附加到DOM中。

感谢@EliR链接的可能重复。现在我对它的工作原理有了一些想法。嗯，我明白你上面说的。但我还有最后一个问题。在“正常方式”中，将“div”附加到“someId”中是否会发生多个渲染过程？不，在这种情况下，可能只有一个渲染调用，并且不会有很大区别<如果插入一系列元素，代码>文档片段s非常棒。耶！非常感谢你！现在我有了一个清晰的想法@彼得梅德

var frag = document.createDocumentFragment();
var div1 = document.createElement("div");
var div2 = document.createElement("div");
frag.appendChild(div1);
frag.appendChild(div2);
document.getElementById("someId").appendChild(frag);

var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
div.appendChild(div1);
div.appendChild(div2);

document.getElementById("someId").appendChild(div);