Tôi có nên sử dụng document.createDocumentFragment hay document.createElement

Tôi đang đọc về các đoạn tài liệu và chỉnh sửa lại DOM và tự hỏi sự document.createDocumentFragmentkhác nhau như thế nào document.createElementvì có vẻ như cả hai đều không tồn tại trong DOM cho đến khi tôi nối chúng vào một phần tử DOM.

Tôi đã làm một bài kiểm tra (bên dưới) và tất cả chúng đều mất cùng một khoảng thời gian (khoảng 95 mili giây). Theo phỏng đoán, điều này có thể là do không có kiểu áp dụng cho bất kỳ phần tử nào, vì vậy có thể không chỉnh lại.

Dù sao, dựa trên ví dụ bên dưới, tại sao tôi nên sử dụng createDocumentFragmentthay vì createElementkhi chèn vào DOM và có sự khác biệt giữa hai loại này.

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

Sự khác biệt là một đoạn tài liệu sẽ biến mất một cách hiệu quả khi bạn thêm nó vào DOM. Điều gì xảy ra là tất cả các nút con của đoạn tài liệu được chèn vào vị trí trong DOM nơi bạn chèn đoạn tài liệu và chính đoạn tài liệu đó không được chèn. Bản thân mảnh vỡ vẫn tiếp tục tồn tại nhưng bây giờ không có con.

Điều này cho phép bạn chèn nhiều nút vào DOM cùng một lúc:

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

Một sự khác biệt rất quan trọng khác giữa việc tạo một phần tử và một đoạn tài liệu:

Khi bạn tạo một phần tử và nối nó vào DOM, phần tử đó sẽ được nối vào DOM, cũng như các phần tử con.

Với một phân đoạn tài liệu, chỉ các phần tử con được thêm vào.

Chăm sóc:

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>

dẫn đến HTML không đúng định dạng này (đã thêm khoảng trắng)

<ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>