"आभासी" डोम हेरफेर?

Question

मुझे पता है कि एकाधिक डोम मैनिपुलेशन करना बुरा है क्योंकि यह कई पश्चातापों को मजबूर करता है।

यानी:

$('body').append('<div />') 
     .append('<div />') 
     .append('<div />') 
     .append('<div />'); 

इसके बजाय एक बेहतर अभ्यास जाहिरा तौर पर है:

$('body').append('<div><div></div><div></div><div></div><div></div></div>'); 

लेकिन मैं आभासी हेरफेर के बारे में उत्सुक हूँ

यानी:

$('<div />').append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .append('<div />') 
      .appendTo('body'); 

यह है अभी भी बुरा है, जाहिर है कि एक समारोह को कई बार कॉल करने से कुछ ओवरहेड होगा, लेकिन क्या कोई गंभीर प्रदर्शन हिट होने जा रहा है?

---

कारण मैं पूछ रहा हूँ यह है:

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = $('<div />'); 

$.each(divs, function(i,o){ 
    element.append($('<div />', o)); 
}); 

$('body').append(element); 

कल्पना कीजिए कि divs सरणी (एक रूप का वर्णन एक डेटाबेस तालिका से आ गया है ठीक है, मैं div के उपयोग कर रहा हूँ उदाहरण में है, लेकिन यह हो सकता है आसानी से इनपुट के साथ प्रतिस्थापित) या कुछ समान।

या "सिफारिश" संस्करण हमारे पास साथ:

var divs = [ 
    {text: 'First', id: 'div_1', style: 'background-color: #f00;'}, 
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'}, 
    {text: 'Third', id: 'div_3', style: 'background-color: #00f;'}, 
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'}, 
    {text: 'Fifth', id: 'div_5', style: 'background-color: #0f0;'}, 
    {text: 'Sixth', id: 'div_6', style: 'background-color: #00f;'} 
]; 

var element = '<div>'; 

$.each(divs, function(i,o){ 
    element += '<div '; 

    $.each(o, function(k,v){ 
     if(k != 'text'){ 
      element += k+'="'+v+'" '; 
     }    
    }); 

    element += '>'+o.text+'</div>'; 

}); 

element += '</div>'; 

$('body').append(element); 

Answer 1

सबसे पहले, हालांकि यह प्रदर्शन क्षमता के बारे में पढ़ने के लिए बहुत अच्छा है यह आप हमेशा अगर आप भी एक समस्या है देखने के लिए मापने के द्वारा शुरू कर देना चाहिए की तरह करता है।

यदि आप कोई समस्या नहीं समझ पा रहे हैं, तो सबसे अधिक पढ़ने योग्य कोड लिखें।

यदि आप किसी समस्या, उपाय, परिवर्तन और माप को समझ सकते हैं।

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

यदि आप दूसरे और तीसरे उदाहरण के बीच गति में अंतर प्राप्त कर सकते हैं तो मुझे आश्चर्य होगा - और यदि आप उनमें से किसी के बीच कोई बड़ा अंतर देख सकते हैं तो आश्चर्यचकित होगा।

Answer 2

यदि आप नोड्स को जोड़ते समय प्रदर्शन के बारे में वास्तव में चिंतित हैं, तो आपको दस्तावेज़फ्रेगमेंट का उपयोग करने की आवश्यकता है। ये आपको बिना किसी शिकायत के डोम में तत्वों को जोड़ने की अनुमति देगा। जॉन इस्तीफा इस विषय पर excellent article है। उन्होंने प्रदर्शन में 200-300% की वृद्धि दर्ज की है। मैंने अपने ऐप्स में से एक में दस्तावेज़ फ्रेगमेंट लागू किए और अपने दावे की पुष्टि कर सकते हैं।

Answer 3

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

लेकिन हाँ, दस्तावेज़ टुकड़ा दृष्टिकोण (डोम के लिए संलग्न करने से पहले एक अलग नोड में सभी नोड्स डाल) का उपयोग तेजी से ज्यादातर मामलों में होने जा रहा है, लगभग कभी धीमी।

• http://mustache.github.com/
• https://developers.google.com/closure/templates/docs/helloworld_js
• https://developer.mozilla.org/en-US/docs/JavaScript_templates

Answer 4

जो भी क्रम पर अच्छे पुराने मार्कअप पीढ़ी को क्या हुआ? गंभीरता से, क्या हुआ?

मैं @ सोहेनी के पठनीयता के महत्व के बारे में सहमत हूं, लेकिन डोम मैनिप्लेशंस कुछ ब्राउज़र द्वारा किए जा सकने वाले सबसे महंगे संचालन हैं। मार्कअप की एक स्ट्रिंग को बनाए रखने का विकल्प पूरी तरह से पठनीय बनाया जा सकता है और नगण्य से परे उपयोगकर्ता अनुभव सुधार प्रदान करता है। एक पूरी तरह से उचित डेटा पृष्ठांकन के लिए (और नहीं सबसे जटिल अब तक का परिदृश्य) -

this jsperf में, हम एक 10x100 तालिका कार्यावधि में बना रहे हैं। क्रोम के हालिया संस्करण को चलाते हुए क्वाड कोर मशीन पर डायरेक्ट डोम मैनिपुलेशन स्क्रिप्ट को पूरा करने के लिए 60 एमएमएस लगते हैं, क्योंकि मार्कअप कैशिंग के लिए 3 एमएमएस के विपरीत।

यह मेरा सेटअप पर एक पृथक अंतर है, लेकिन क्या बारे में कॉर्पोरेट फ़ायरवॉल के पीछे बैठे गरीब नंबर-क्रंचिंग लोक और अभी भी IE के एक अप्रचलित संस्करण का उपयोग करने के लिए मजबूर है? क्या होगा यदि डीओएम परिचालनों की आवश्यकता भारी हो, विशेषता गुणांक और आक्रामक रूप से को मजबूर कर रहा हो?

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