jQuery अनुकूलन चयनकर्ता

Question

मैं दूसरे दिन सोच रहा था कि जब आप jQuery में चयनकर्ता टाइप करते हैं तो यह प्रदर्शन में एक अंतर डालता है यदि आप अपने चयनकर्ताओं को बहुत विशिष्ट या बहुत कम दिखाते हैं।

जैसे

$('$myId .someElement') 

या

$('table#myId > tbody > tr > td > div.someElement'); 

2 विकल्प एक बहुत तेज है या अंतर neglectable होगा, कहते हैं कि जब .each() कर सकते हैं यदि आप पर एक ही तत्व खोजने की जरूरत है ।

Answer 1

मैं जाना होगा के लिए:

$('.someElement', '#myId') 

getElementById के बाद से सबसे तेजी से चयनकर्ता ऑपरेशन है, तो आपको पहले अपनी सामग्री फ़िल्टर कर रहे हैं और फिर वर्ग के लिए खोज। इसके अलावा चयनकर्ताओं को जितना तेज़ चयन होगा (निर्भर करता है कि वंशज या बच्चे चयनकर्ताओं - टिप्पणियों की जांच करें!)। @Test @ फ़ेलिक्स परीक्षण केस पर आधारित है।

संपादित करें: इसलिए इस उत्तर को बढ़ाने के लिए। jQuery documentation के आधार पर:

डिफ़ॉल्ट रूप से, चयनकर्ताओं दस्तावेज़ जड़ पर शुरू डोम के भीतर अपने खोजें कर। हालांकि, वैकल्पिक संदर्भ के लिए वैकल्पिक संदर्भ 0 $पैरामीटर $() फ़ंक्शन पर उपयोग करके खोज किया जा सकता है।

तो जब आप एक दूसरा पैरामीटर (एक संदर्भ) प्रदान करते हैं jQuery कि तत्व पहले और फिर इसे भीतर खोज के लिए खोज करेंगे, तो यह से अनुवाद किया जाएगा:

$('.someElement', '#myId') 

करने के लिए:

$('#myId').find('.someElement') 

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

    $('.someElement', '#myId')     $('#myId').find('.someElement') 
Chrome 8.0.552    36,527          37,400 
Firefox 3.6.13    17,632          19,155 

Answer 2

अद्यतन 2:

यहाँ कुछ अन्य टिप्पणी सारांश में। जवाब है यह पर निर्भर करता है।

jQuery का चयनकर्ता इंजन सिज़ल चयनकर्ता का मूल्यांकन करता है उसी तरह सीएसएस करता है: from right to left। तो आम तौर पर दाएं तरफ बहुत विशिष्ट और बाईं तरफ कम विशिष्ट होना बेहतर होता है।

लेकिन यह एचटीएमएल की संरचना पर निर्भर करता है और तत्वों को बिखरे हुए कैसे आप चाहते हैं।

तो अगर आप

      a 
         | 
         ... 
         | 
         b 
       ----------------- 
       |    | 
d d d c c c c c c c c c c c c c c c c c c c 

तो किया जा रहा है और अधिक विशिष्ट, तेजी से $('a b > c') है, क्योंकि आप तत्व b > c साथ जल्दी सेट कम कर रहे हैं और हर c के लिए a विरासत की जाँच करने की जरूरत नहीं है की है।

जबकि यदि आप,

      a 
         | 
         ... 
         | 
         b 
       ----------------- 
       |    | 
e e e e e e e e d d c c c c c c e e e e e e 

तो $('a c') तेजी से हो जाएगा के बाद से चयनकर्ता सरल है और b का एक बच्चा होने के लिए परीक्षण c इस मामले में अनावश्यक है (बेशक आप भी $('c') कर सकता है)।

---

मूल जवाब:

बावजूद जो उन में से एक, तेजी से होता है आप बार बार एक तत्व का उपयोग करने की है, दुकान इसे करने के लिए एक संदर्भ:

var $element = $('#myId .someElement'); 

$('some other selector').each(function() { 
    // access $element here 
}); 

---

The first selector seems to be a bit faster (क्रोम 8 में)।

नए ब्राउज़रों में (जो querySelectorAll का समर्थन करता है), अंतर शायद उन ब्राउज़र में जितना बड़ा नहीं है जो इसका समर्थन नहीं करते हैं।

अद्यतन:

मुझे लगता है कि यह ज्यादातर कितने निर्मित तरीकों jQuery का उपयोग कर सकते पर निर्भर करता है।तो यह सोचते हैं querySelector* उपलब्ध नहीं है, पहले चयनकर्ता दूसरे चयनकर्ता के लिए

document.getElementById('myId')[0].getElementsByClassName('someElement') 

में अनुवाद किया जा सकता है, jQuery अतिरिक्त जांच करने के लिए एक तत्व वास्तव में एक बच्चा है या नहीं होगा। अर्थात। कुछ और प्रसंस्करण शामिल है।

Answer 3

दूसरा एक तेज़ होगा, क्योंकि यह जानता है कि प्रत्येक चरण में वास्तव में क्या देखना है।

इस उदाहरण में:

$('table#myId > tbody > tr > td > div.someElement'); 

अगर कोई tbody, या कोई टीआर, या कोई टीडी (आदि) थे, यह खोज से बाहर शॉर्टकट सकता है सीधे। साथ ही, प्रत्येक अनुवर्ती चरण खोज को सीमित कर देगा (उदाहरण: <thead> के अंदर खोज नहीं)। इस उदाहरण से तुलना करें:

$('#myId .someElement') 

यह #myId के हर उप-तत्व को स्कैन करने के लिए होगा।

---

संपादित: FelixKing के रूप में बताया, अपना पहला उदाहरण $('#myId .someElement') वास्तव में तेजी है। केवल मामूली, लेकिन फिर भी, तेज़, इसलिए मैंने सोचा कि मुझे जवाब देना चाहिए। बच्चे चयनकर्ता (>) का उपयोग करके, वंशज चयनकर्ता (एक स्थान) के विपरीत सबसे तेज़ ट्रैवर्सल विधि है, क्योंकि तत्वों का संभावित सेट बहुत कम है। हालांकि, आधुनिक ब्राउज़रों ने अत्यधिक अंतर्निहित विधियों को अनुकूलित किया है जो jQuery कभी-कभी निष्पादन समय को कम करने के लिए उपयोग कर सकते हैं। इसलिए, जैसा कि इस विशेष मामले में देखा गया है, 'बदतर' वास्तव में बेहतर है, क्योंकि ब्राउज़रों को उस विशेष क्वेरी को निष्पादित करने के लिए बेहतर अनुकूलित किया जाता है। सामान्य रूप से, मूल बिंदु अभी भी खड़ा है, खासकर यदि आप ऐसा कुछ उपयोग कर रहे हैं जो संभावित रूप से ब्राउज़र द्वारा अनुकूलित नहीं किया जा सकता (उदाहरण के लिए कस्टम चयनकर्ता)।

Answer 4

'#myid .myclass' 

1) सभी तत्वों को खोजने जिसमें कक्षा myclass
2) प्रत्येक ऐसे तत्व के लिए, अपने पूर्वजों की श्रृंखला को ऊपर उठाएं और अगर आप #myid पूर्वजों के पास जाते हैं तो रोकें। यदि ऐसा कोई पूर्वज नहीं है, तो तत्व को त्यागें।

अब, यह बहुत अच्छी तरह से हो सकता है ब्राउज़रों इस प्रक्रिया का अनुकूलन है कि, उदाहरण के लिए:

1) #myid तत्व
2 लगता है) वर्ग myclass है और वह #myid तत्व के वंशज हैं कि सभी तत्वों को खोजने

---

table#myid > tbody > tr > td > div.mylcass 

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

#myid > tbody > tr > td > div.mylcass 

एक प्रकार चयनकर्ता के साथ एक वर्ग चयनकर्ता उपसर्ग करना प्रदर्शन-वार बेहतर है। इसलिए, यदि आप तत्व के प्रकार को जानते हैं, तो आपको इसे सेट करने के लिए प्रोत्साहित किया जाता है।

मुझे उन बच्चों के चयनकर्ताओं के बारे में निश्चित नहीं है। मुझे लगता है कि यदि आप उनका उपयोग करते हैं तो यह तेज़ होना चाहिए। लेकिन कितनी तेजी से? संभवतः उपेक्षित? इसके अलावा, यह बदसूरत लग रहा है।

इस पर विचार करें:

#myid td > div.myclass 

तो #myid एक मेज तत्व है, और आप कोई नेस्टेड तालिकाओं, तो इस चयनकर्ता अपने दूसरे चयनकर्ता के रूप में के रूप में तेजी से होना चाहिए। मैं इसका इस्तेमाल करूंगा।