我应该使用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'); 

2 Solutions collect form web for “我应该使用document.createDocumentFragment或document.createElement”

不同之处在于,将文档片段添加到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 

创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> 
  • Javascript的querySelector与getElementById
  • 从一个网页上刮很多Javascript的屏幕
  • 脚本可以用innerHTML插入吗?
  • 在IE中DOMNodeInserted相当于?
  • React:我可以操纵DOM React渲染多less?
  • 如何找出哪个DOM元素具有焦点?
  • 节点对象和元素对象之间的区别?
  • JQuery在淡出之后删除DOM元素
  • checkbox值始终为“开”
  • 操作innerHTML将删除子元素的事件处理程序?
  • 如何replaceAngularJS指令链接函数中的元素?