文档片段如何工作?

时间:2017-08-07 06:29:43

标签: javascript html 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);

以上两个例子实际发生了什么?

1 个答案:

答案 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实例调用insertBeforeDocumentFragment会将文档片段的子节点移动到新的父节点。之后,文档片段为空。

正如您正确提到的,创建文档片段并向其附加多个元素比将这些元素逐个附加到真实DOM更有效,导致浏览器每次重新呈现页面的某些部分时间。由于文档片段的内容在屏幕上不可见,因此页面必须仅重新呈现一次。

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