reading about document fragments ve DOM akışı vardı ve document.createDocumentFragment ikisi de ben bir DOM öğesi için onları ekleme kadar DOM var gibi görünüyor gibi document.createElement farklı nasıl merak ettim.

Bir test yaptım (aşağıda) ve her zaman tam olarak aynı miktarda (yaklaşık 95ms) aldı. Bir tahmin de, bu muhtemelen orada hiçbir stil öğeleri herhangi uygulanacak olması nedeniyle, baypas belki olabilir.

DOM ve ne içine ikisi arasındaki farklılıklarını eklerken her neyse, bu örneğe göre, neden createElement yerine createDocumentFragment kullanmalıyım.

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');

Fark belge parçası DOM eklediğinizde, etkin bir şekilde kaybolur. Ne belge parçanın tüm alt düğümlerin belge parça eklemek ve eklenen kendisi değil belge parça nerede DOM konuma eklenir. Yok kendisi devam ediyor parçasını ama şimdi çocukları vardır.

Bu, aynı zamanda DOM, birden fazla düğüm eklemek için izin verir:

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