jQuery: चयनकर्ता को संदर्भ जोड़ना आपके चयनकर्ता को परिशोधित करने से कहीं अधिक तेज़ है?

Question

मैंने अभी देखा है कि चयनकर्ता को संदर्भ जोड़ना आपके चयनकर्ता को परिशोधित करने से कहीं अधिक तेज़ है।

$('#bar li').append('bla');

यह आम तौर पर सच है:

$('li',$('#bar')).append('bla');

से दोगुने से तेजी से है? चयनकर्ता के

Answer 1

जोड़ने संदर्भ अपने चयनकर्ता

यह सामान्य मामले में सच है परिष्कृत करने की तुलना में बहुत तेज है। आपके विशिष्ट उदाहरणों के संबंध में हालांकि यह jQuery < = 1.2.6 के लिए जरूरी नहीं है।

jQuery 1.2.6 तक और इसमें चयनकर्ता इंजन "टॉप डाउन" (या "बाएं से दाएं") तरीके से काम करता है। जिसका अर्थ है कि दोनों अपने उदाहरण की तरह इस (मोटे तौर पर) संचालित होगा:

var root = document.getElementById('bar'); 
return root.getElementsByTagName('li'); 

jQuery 1.3.x (यानी, Sizzle, जो jQuery एम्बेड) introduced a "bottom up" (or "right to left") approach डोम क्वेरी करने के लिए। तो $('#bar li') अब (मोटे तौर पर) हो जाता है:

var results = []; 
var elements = document.getElementsByTagName('li'); 
for(var i=0; i < elements.length; i++) { 
    var element = elements[i]; 
    var parent = element.parentNode; 
    while(parent) { 
     if(parent.id == 'bar') { 
      results.push(element) 
      break; 
     } 
     parent = parent.parentNode; 
    } 
} 
return results 

लाभ और दोनों दृष्टिकोण करने के लिए कमियां हैं। आपको डाउनसाइड्स में से एक मिला।

संपादित: सिर्फ this discussion कि कड़ाके की धूप ट्रंक अब चयनकर्ताओं की एक विशेष छूट जहां #id पहला है बनाता है से पता चला। यह रूट संदर्भ के रूप में इसका उपयोग करता है, चीजों को तेज करता है। यदि आप देख रहे गति अंतर को खत्म नहीं करते हैं तो यह कम होना चाहिए।