Должен ли я использовать document.createDocumentFragment или document.createElement

Я был читающий о фрагментах документа и DOM, и задавался вопросом, как document.createDocumentFragment отличается от document.createElement, поскольку он выглядит так, как ни один из них не существует в DOM, пока я не добавлю их в элемент DOM.

Я сделал тест (ниже), и все они занимали ровно столько же времени (около 95 мс). Вероятно, это возможно из-за того, что стиль не применяется ни к одному из элементов, поэтому, возможно, нет возможности оплавления.

В любом случае, на основании приведенного ниже примера, почему я должен использовать 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');

Ответы

Ответ 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

Ответ 2

Еще одно очень важное различие между созданием элемента и фрагментом документа:

Когда вы создаете элемент и добавляете его в 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>