मैं का उपयोग करना चाहिए document.createDocumentFragment या document.createElement

Question

मैं reading about document fragments था और डोम पुनर्प्रवाहित और सोचा कि document.createDocumentFragmentdocument.createElement से मतभेद के रूप में ऐसा लगता है कि उनमें से कोई भी डोम में मौजूद जब तक मैं उन्हें एक डोम तत्व को जोड़ देते हैं।

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

वैसे भी, नीचे दिए गए उदाहरण के आधार पर, मुझे 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

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

यह आपको एक ही समय में डोम में एकाधिक नोड्स सम्मिलित करने के लिए अनुमति देता है:

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 

Answer 2

एक तत्व है और एक दस्तावेज़ टुकड़ा बनाने के बीच एक अन्य महत्वपूर्ण अंतर:

जब आप एक तत्व बना सकते हैं और संलग्न यह डीओएम को, तत्व डीओएम, साथ ही बच्चों के लिए जोड़ा गया है।

दस्तावेज़ खंड के साथ, केवल बच्चों को जोड़ा जाता है।

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>