Я читал о фрагментах документа и обратном течении DOM и задался вопросом как document.createDocumentFragment
отличавшийся от document.createElement
поскольку похоже, что ни один из них не существует в DOM, пока я не добавляю их к элементу DOM.
Я сделал тест (ниже), и все они заняли точно то же количество времени (приблизительно 95 мс). В предположении это могло возможно произойти из-за того, чтобы там быть никаким стилем, относился к любому из элементов, таким образом, никакое обратное течение, возможно.
Так или иначе, на основе примера ниже, почему я должен использовать createDocumentFragment
вместо createElement
при вставке в DOM и каков differnce между двумя.
var htmz = "";
for (var i = 0; i < 2001; i++) {
htmz += '- link ' + i + '
';
}
htmz += '';
//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');
Разница в том, что фрагмент документа фактически исчезает, когда вы добавляете его в 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