任何人都可以简要解释一下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);
以上两个例子实际发生了什么?
答案 0 :(得分:3)
“片段方式”和“正常方式”之间存在重要区别:
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。