Jef*_*ohn 16 html javascript documentfragment
任何人都可以简要解释一下 documentFragment 实际上做了什么。我一直在寻找一个明确的解释，但直到现在我才得到任何解释。
我读到的是，documentFragment 类似于 DOM 结构，我们可以在其中添加修改 DOM 元素而不会中断文档的实际流程。
我还读到，documentFragment 比将每个元素一个一个地附加到 DOM 中要快。在我看来，documentFragment 不会每次都重新计算样式，因此速度更快。
我有两个例子，
以片段的方式进行：
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);
在上面的两个例子中实际发生了什么？
Pet*_*der 24
“片段方式”和“正常方式”之间有一个重要区别：
document.createElement：const div = document.createElement('div');
div.appendChild(document.createTextNode('Hello'));
div.appendChild(document.createElement('span'));
document.body.appendChild(div);
console.log(div.childNodes); // logs a NodeList [#text 'Hello', <span>]
这导致以下 DOM 结构：
<body>
<div>
Hello
<span></span>
</div>
</body>
DocumentFragment：const frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Hello'));
frag.appendChild(document.createElement('span'));
document.body.appendChild(frag);
console.log(frag.childNodes); // logs an empty NodeList
这导致以下 DOM 结构：
<body>
Hello
<span></span>
</body>
这意味着调用appendChild或insertBefore使用实例DocumentFragment将文档片段的子节点移动到新的父节点。之后，文档片段为空。
正如您正确提到的，创建一个文档片段并将多个元素附加到其中比将这些元素一个一个地附加到真实 DOM 会更有效，这会导致浏览器每次重新渲染页面的一部分。因为文档片段的内容在屏幕上是不可见的，所以页面只需要重新渲染一次。
无论何时创建大型 DOM 结构，都建议在文档片段中创建它，并在完成后将其附加到 DOM。