स्थानीय चर के बनाम jQuery चयनकर्ताओं का प्रदर्शन

Question

क्या यह अनुशंसा की जाती है कि, जब मुझे किसी फ़ंक्शन के दायरे में एक से अधिक बार jQuery चयनकर्ता के परिणाम तक पहुंचने की आवश्यकता हो, तो मैं चयनकर्ता को एक बार चलाता हूं और इसे स्थानीय चर में असाइन करता हूं?

यहां मेरे पतंग उदाहरण को क्षमा करें, लेकिन मुझे लगता है कि यह सवाल दिखाता है। तो, यह कोड तेजी से प्रदर्शन करेंगे:

var execute = function(){ 
    var element = $('.myElement'); 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

इस कोड से:

var execute = function(){ 
    $('.myElement').css('color','green'); 
    $('.myElement').attr('title','My Element'); 
    $('.myElement').click(function(){ 
     console.log('clicked'); 
    }); 
} 

अगर वहाँ कोई अंतर नहीं है, किसी को भी क्यों की व्याख्या कर सकते? क्या jQuery उन्हें चुनने के बाद कैश तत्वों को कैश करता है ताकि बाद के चयनकर्ताओं को फिर से डोम को खोजने की परेशानी न हो?

Answer 1

संबद्ध है, निश्चित रूप से तेजी से होता है।

http://jsperf.com/caching-jquery-selectors

उत्तरार्द्ध मामले, अपने चयनकर्ताओं को पुनर्परिभाषित, ~ के रूप में 35% धीमी बताया जाता है: यहाँ एक परीक्षण मैं सबूत के रूप में किया जाता है।

Answer 2

स्थानीय चर में संदर्भ संग्रहीत करना प्रत्येक बार चयन कोड चलाने से तेज़ होगा। जब आप इसे एक चर में संग्रहीत करते हैं तो उचित तत्व (ओं) को खोजने के लिए किसी भी कोड को निष्पादित करने की बात नहीं है। अंगूठे का मेरा नियम एक चर में jQuery लुकअप के परिणामों को संग्रहीत करना है यदि मैं इसे एक से अधिक बार उपयोग करने जा रहा हूं।

Answer 3

यहाँ एक अन्य विकल्प चयनकर्ता दोहरा के बजाय एक each उपयोग करने के लिए है, और यह चयनकर्ता संदर्भ, अपने पहले मामले पुनर्प्रयोग काम करते हैं, बार-बार

var execute = function(){ 
    $('.myElement').each(function() { 
     var elem = $(this); 
     elem.css('color','green'); 
     elem.attr('title','My Element'); 
     elem.click(function(){ 
     console.log('clicked'); 
     }); 
    }); 
} 

Answer 4

इस एक को न भूलें:

var execute = function(){ 
    $('.myElement') 
     .css('color','green') 
     .attr('title','My Element') 
     .click(function(){ 
      console.log('clicked'); 
     }); 
} 

Answer 5

तुम वास्तव में सही मायने में कैश की गई दृष्टिकोण भूल रहे हैं।

jQuery के साथ बात यह है कि प्रारंभिक लुकअप: $('.selector') महंगा है। लेकिन उसके बाद, अपने कार्यों को उस पर चेन करना, या इसे एक चर के लिए असाइन करना और चर पर अपने कार्यों को निष्पादित करना इससे कोई फर्क नहीं पड़ता। मुख्य प्रदर्शन लाभ जो आप प्राप्त कर सकते हैं वह तत्व को और भी कैश कर रहा है, और jQuery चयनकर्ता को आपके फ़ंक्शन कॉल के प्रत्येक पुनरावृत्ति को असाइन नहीं कर रहा है।

var element = $('.myElement'); 
var execute = function(){ 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

यह दृष्टिकोण अन्य दृष्टिकोणों के सबसे तेज़ संस्करण के रूप में लगभग दोगुना तेज़ है।

देखें http://jsperf.com/caching-jquery-selectors/17

नोट: यदि आपका डोम परिवर्तन के दौरान यह जीवन है, तो आप तत्वों की एक ताजा चयन के साथ element चर को अपडेट करें।