क्या मुझे document.createDocumentFragment या document.createElement का उपयोग करना चाहिए

Question

मैं दस्तावेज़ के टुकड़े और DOM रिफ्लो के बारे में पढ़ रहा था और सोच रहा था कि यह कैसे document.createDocumentFragmentअलग है document.createElementजैसे कि उनमें से कोई भी DOM में मौजूद नहीं है जब तक कि मैं उन्हें DOM तत्व के साथ जोड़ नहीं देता।

मैंने एक परीक्षण किया (नीचे) और उन सभी ने ठीक उसी समय (लगभग 95ms) की मात्रा ली। एक अनुमान के अनुसार यह संभवतः किसी भी तत्व पर कोई शैली लागू नहीं होने के कारण हो सकता है, इसलिए शायद कोई भी रिफ्लेक्ट न हो।

वैसे भी, नीचे दिए गए उदाहरण के आधार पर, मुझे डोम में सम्मिलित करने के createDocumentFragmentबजाय इसका उपयोग क्यों करना चाहिए createElementऔर दोनों के बीच क्या अंतर है।

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

Answer 1

अंतर यह है कि एक दस्तावेज़ टुकड़ा प्रभावी रूप से गायब हो जाता है जब आप इसे डोम में जोड़ते हैं। क्या होता है कि दस्तावेज़ के टुकड़े के सभी बच्चे नोड डोम में उस स्थान पर डाले जाते हैं जहाँ आप दस्तावेज़ के टुकड़े डालते हैं और दस्तावेज़ के टुकड़े को सम्मिलित नहीं किया जाता है। यह खंड ही अस्तित्व में है लेकिन अब कोई संतान नहीं है।

यह आपको एक ही समय में 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

Comments

जवाब देने के लिए धन्यवाद। आप कहते हैं कि यह एक ही समय में कई सम्मिलित करने की अनुमति देता है लेकिन मैं doc.createElement का उपयोग करके प्राप्त कर सकता हूं। फर्क सिर्फ इतना है कि मुझे तत्वों को पहले <span> टैग में लपेटना था और फिर उस <span> को DOM में डालना था। क्या इसीलिए मुझे createDocumentFragment का उपयोग करना चाहिए? DOM में डाले जा रहे अनावश्यक तत्वों से बचने के लिए?

— स्क्रीनमैंकी

हां, इसका उपयोग करने का एक कारण निश्चित रूप से है। इसके अलावा, एक दस्तावेज़ के टुकड़े में किसी भी प्रकार का नोड हो सकता है जबकि एक तत्व नहीं हो सकता है।

— टिम डाउन

वास्तव में टुकड़ा "गायब" नहीं होता है; ब्राउज़र अपने चाइल्डनॉड्स को DOM में ले जाता है। तो टुकड़ा अभी भी मौजूद होगा, लेकिन यह सम्मिलन के बाद खाली हो जाएगा।

— inf3rno

@ inf3rno: इसलिए "प्रभावी रूप से" शब्द का उपयोग और इसके बाद का स्पष्टीकरण, जो कि आपके जैसा ही है। मैंने स्वीकार किया कि मुझे जवाब में स्पष्ट रूप से कहना चाहिए कि कोई बच्चा नोड्स के साथ टुकड़े का अस्तित्व बना हुआ है।

— टिम डाउन

@TimDown आपके उत्तर के लिए धन्यवाद! अगर मुझे आपकी बात सही लगती है, तो प्रदर्शन, उपयोग createFragmentऔर createElementस्मृति के संबंध में लगभग एक ही प्रभाव पड़ता है क्योंकि वे दोनों बैच कई बार के लिए पुनरावृत्तियों के बजाय DOM को अपडेट करते हैं। जबकि मुख्य लाभ createFragmentयह है कि यह आपको मुफ्त में संलग्न करने के लिए जो भी बाल तत्व चुनने की सुविधा प्रदान करता है? अगर मैं गलत था तो मुझे सुधारो।

— एक्सली

Answer 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>

इस विकृत HTML में परिणाम (व्हाट्सएप जोड़ा गया)

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