我是reading about document fragments并且DOM重排并且想知道document.createDocumentFragment
与document.createElement
的区别,因为看起来它们都不存在于DOM中,直到我将它们附加到DOM元素。
我做了一个测试(下面),他们都花了相同的时间(约95ms)。猜测这可能是由于没有任何样式应用于任何元素,因此可能没有回流。
无论如何,基于下面的示例,为什么在插入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');
答案 0 :(得分:89)
不同之处在于,将文档片段添加到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
答案 1 :(得分:6)
创建元素和文档片段之间的另一个非常重要的区别:
当您创建元素并将其附加到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);
}());
&#13;
Sample List:
<ul id="ul_test"></ul>
&#13;
导致这种格式错误的HTML(添加空格)
<ul id="ul_test">
<li>Document Fragment</li>
<div><li>Inside Div</li></div>
</ul>