ฉันควรใช้ document.createDocumentFragment หรือ document.createElement

ฉันกำลังอ่านเกี่ยวกับส่วนของเอกสารและการจัดเรียง 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');

ความแตกต่างคือส่วนของเอกสารจะหายไปอย่างมีประสิทธิภาพเมื่อคุณเพิ่มลงใน 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

ความแตกต่างที่สำคัญอีกประการหนึ่งระหว่างการสร้างองค์ประกอบและส่วนของเอกสาร:

เมื่อคุณสร้างองค์ประกอบและต่อท้ายเข้ากับ 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>

ซึ่งส่งผลให้ HTML มีรูปแบบไม่ถูกต้อง (เพิ่มช่องว่าง)

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