我应该使用document.createDocumentFragment或document.createElement

我正在阅读关于文档片段和DOM回stream，并想知道document.createDocumentFragment如何不同于document.createElement因为它看起来都不存在于DOM中，直到我将它们追加到一个DOM元素。

我做了一个testing（下面），他们都花了相同的时间（约95毫秒）。 据猜测，这可能是由于没有适用于任何元素的样式，所以没有回stream可能。

无论如何，根据下面的例子，为什么我应该使用createDocumentFragment而不是createElement插入到DOM中，以及两者之间的差异。

 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'); 

Answer 1

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

这允许您同时将多个节点插入到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 

Answer 2

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

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

使用文档片段，仅添加子项。

以下列情况为例：

 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>