相关疑难解决方法(0)

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

我做了一个测试(下面),他们都花了相同的时间(大约95ms).猜测这可能是由于没有任何样式应用于任何元素,因此可能没有回流.

无论如何,基于下面的例子,我为什么要使用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');