Javascript 我应该使用 document.createDocumentFragment 还是 document.createElement

Should I use document.createDocumentFragment or document.createElement

提问by screenm0nkey

I was reading about document fragmentsand DOM reflow and wondered how document.createDocumentFragmentdiffered from document.createElementas it looks like neither of them exist in the DOM until I append them to a DOM element.

我正在阅读有关文档片段和 DOM 重排的内容，并想知道它们有何document.createDocumentFragment不同，document.createElement因为在我将它们附加到 DOM 元素之前，它们似乎都不存在于 DOM 中。

I did a test (below) and all of them took exactly the same amount of time (about 95ms). At a guess this could possibly be due to there being no style applied to any of the elements, so no reflow maybe.

我做了一个测试（如下），它们都花费了完全相同的时间（大约 95 毫秒）。猜测这可能是由于没有应用于任何元素的样式，因此可能没有回流。

Anyway, based on the example below, why should I use createDocumentFragmentinstead of createElementwhen inserting into the DOM and whats the differnce between the two.

无论如何，基于下面的示例，为什么我应该在插入 DOM 时使用createDocumentFragment而不是使用它，createElement两者之间有什么区别。

var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');


//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

采纳答案by Tim Down

The difference is that a document fragment effectively disappears when you add it to the DOM. What happens is that all the child nodes of the document fragment are inserted at the location in the DOM where you insert the document fragment and the document fragment itself is not inserted. The fragment itself continues to exist but now has no children.

不同之处在于，当您将文档片段添加到 DOM 时，它会有效地消失。发生的情况是文档片段的所有子节点都插入到 DOM 中您插入文档片段的位置，而文档片段本身并未插入。片段本身继续存在，但现在没有孩子。

This allows you to insert multiple nodes into the DOM at the same time:

这允许您同时将多个节点插入到 DOM 中：

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

回答by Jeremy J Starcher

Another very important difference between creating an element and a document fragment:

创建元素和文档片段之间的另一个非常重要的区别：

When you create an element and append it to the DOM, the element is appended to the DOM, as well as the children.

当您创建一个元素并将其附加到 DOM 时，该元素会附加到 DOM 以及子元素。

With a document fragment, only the children are appended.

对于文档片段，仅附加子项。

Take the case of:

以以下案例为例：

var ul = document.getElementById("ul_test");


// First. add a document fragment:


(function() {
  var frag = document.createDocumentFragment();
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Document Fragment"));
  frag.appendChild(li);
  
  ul.appendChild(frag);
  console.log(2);
}());

(function() {
  var div = document.createElement("div");
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Inside Div"));
   div.appendChild(li);
  
  ul.appendChild(div);
}());

Sample List:
<ul id="ul_test"></ul>

which results in this malformed HTML (whitespace added)

这导致这种格式错误的 HTML（添加了空格）

<ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>