लिए सबसे कारगर तरीका jQuery

Question

में तत्वों को खोजने के लिए अगर मैं एक CSS वर्ग जो मैं केवल कभी तत्वों के रूप में लागू , है जैसे:

<form class="myForm"> 

इन दो jQuery चयनकर्ताओं में से कौन सबसे कुशल, और क्यों है?

a) $('form.myForm') 

b) $('.myForm') 

Answer 1

जैसा कि पहले से ही रेडस्क्वेयर का उल्लेख किया गया है, चयन एल्गोरिदम बाद के jQuery संस्करणों में बदल गया है (आंशिक रूप से getElementsByClassName समर्थन के कारण)। इसके अतिरिक्त, मैंने आज के सबसे हालिया jQuery संस्करण (v1.6) के साथ इसका परीक्षण किया और तुलना के लिए document.getElementsByClassName के लिए एक परीक्षण भी जोड़ा (कम से कम फ़ायरफ़ॉक्स 4 और क्रोम में काम करता है)।

फ़ायरफ़ॉक्स 4 में परिणाम थे:

// With 100 non-form elements: 
$('.myForm') : 366ms 
$('form.myForm') : 766ms 
document.getElementsByClassName('myForm') : 11ms 

// Without any other elements: 
$('.myForm') : 365ms 
$('form.myForm') : 583ms 
document.getElementsByClassName('myForm') : 11ms 

स्वीकार किए जाते हैं जवाब पुरानी है (और अभी भी तरह "jQuery में तत्वों को खोजने के लिए कारगर तरीका" कुछ के लिए खोज के द्वारा पाया जाता है) और लोगों को गुमराह कर सकते, तो मैं महसूस किया कि मुझे यह लिखना है।

इसके अलावा, jQuery और मूल ब्राउज़र चयनकर्ता कार्यों के बीच का समय अंतर देखें। jQuery 1.2.6 में $('.myForm') जबकि jQuery 1.6 में यह था केवल के बारे में गुना धीमी getElementsByClassName की तुलना में अधिक से बार धीमी थी, लेकिन फिर भी $('form.myForm') की तुलना में तेजी (पुराना जवाब के विपरीत)।

नोट: परिणाम Firefox 4 (क्रोम के साथ इसी तरह के परिणाम) के साथ प्राप्त किया गया। ओपेरा 10 में टैग नाम के साथ पूछताछ केवल थोड़ी तेज है, लेकिन ओपेरा भी तेज़ देशी getElementsByClassName का समर्थन करता है।

टेस्ट कोड:http://jsbin.com/ijeku5

Answer 2

संपादित: नीचे दिए गए परिणामों शायद Firefox 3.5 में, jQuery 1.2.6 के लिए कर रहे हैं। ब्राउज़र और jQuery में स्पीड सुधार ने इस जानकारी को अप्रचलित रूप से प्रस्तुत किया है। 4 रूपों और लगभग 100 अन्य तत्वों के साथ

• एक पृष्ठ पर::

---

मैं सिर्फ एक त्वरित बेंच मार्किंग परीक्षण लिखा

• का उपयोग $('form.myForm') 10000 बार ले लिया 1.367s
• $('.myForm') का उपयोग करके 10000 बार 4.202s (307%)

केवल 4 रूपों और कोई अन्य तत्वों के साथ एक पृष्ठ पर:

• का उपयोग $('form.myForm') 10000 बार 1.352s
• का उपयोग $('.myForm') 10000 बार 1.443s ले लिया लिया (106%)

ऐसा प्रतीत होता है कि किसी विशेष नाम के तत्वों की खोज करना एक कण के लिए सभी तत्वों की खोज करने से कहीं अधिक तेज़ है आर कक्षा

संपादित करें: यहाँ मेरी परीक्षण कार्यक्रम है: http://jsbin.com/ogece

कार्यक्रम 100 <p> टैग और 4 <form> रों साथ शुरू होता है, दो अलग अलग परीक्षण चलाता है, <p> टैग हटा देता है और परीक्षण फिर से चलाता है। आश्चर्यजनक रूप से, इस तकनीक का उपयोग करते समय, form.myForm धीमा है। अपने लिए कोड पर नज़र डालें और इसे बनाएं जो आप करेंगे।

Answer 3

पहला चयनकर्ता तेज़ होना चाहिए क्योंकि jQuery फ़िल्टर किए जाने वाले तत्वों की संख्या को कम करने के लिए अंतर्निहित फ़ंक्शन "getElementsByTagName" का उपयोग कर सकता है। दूसरे को डीओएम में सभी तत्व मिलना होगा और अपनी कक्षा की जांच करनी होगी।

Answer 4

form.myForm आईएमओ बहुत तेज़ है क्योंकि इसे केवल तत्वों के एक सबसेट/फ़िल्टर किए गए सेट को देखने की आवश्यकता है और पूरे दस्तावेज़ को फिर से शुरू करने की आवश्यकता नहीं होगी।

Answer 5

slickspeed आज़माएं जहां आप jquery सहित जेएस libs के एकाधिक में चयनकर्ताओं की मोटा गति देख सकते हैं।

Answer 6

संदर्भ के साथ उपयोग किए जाने पर पहला उदाहरण बहुत तेज़ हो जाता है। दूसरा उदाहरण तेजी से चला जाता है, लेकिन ज्यादा नहीं।

http://jsbin.com/uluwe

Answer 7

enobrev, दिलचस्प: मैं एक संदर्भ के साथ तुलना करने के लिए अपने उदाहरण का विस्तार किया। मैं सिर्फ अपने उदाहरण लेकिन का उपयोग कर jQuery 1.3 बीटा 2 here

परिणाम .... (कोष्ठक में 1.2.6 गति)

// With 100 non-form elements and Context: 
$('.myForm', '#someContainer') : 4063ms (3707ms) 
$('form.myForm', '#someContainer') : 6045ms (4644ms) 

// With 100 non-form elements: 
$('.myForm') : 3954ms (25086ms) 
$('form.myForm') : 8802ms (4057ms) 

// Without any other elements with Context: 
$('.myForm', '#someContainer') : 4137ms (3594ms) 
$('form.myForm', '#someContainer') : 6627ms (4341ms) 

// Without any other elements: 
$('.myForm') : 4278ms (7303ms) 
$('form.myForm') : 8353ms (4033ms) 

Answer 8

लोग चलो भाग गया? क्या तुम पागल हो?

$ ('। MyForm') जिस तरह से $ ('form.myform') क्योंकि दूसरा संस्करण ने यह सुनिश्चित करने के aditional जांच करने के लिए की तुलना में तेजी है: अधिकांश शीघ्र तरह से एक तत्व का चयन करने के सबसे छोटा रास्ता है कि तत्व निर्दिष्ट टैग नाम है। मई नया jquery 1.3 इस बात को बदल देगा, लेकिन नवीनतम स्थिर संस्करण पर, टैगनाम को भी निर्दिष्ट करना गलत है। आपको read here होना चाहिए।

मुझे लगता है कि मैंने कहीं कहीं पढ़ा है कि म्यूटूल इस तरह से तेज है। खैर .. शायद मू में, पता नहीं, लेकिन jQuery में यह सबसे तेज़ तरीका है।

इस प्रोफाइलर पर एक नज़र डालें:

(big pic)

पहले ही आईडी के साथ है, दूसरा साथ प्रपत्र # आईडी (मेरे ब्लॉग पेज पर परीक्षण) और वर्ग चयनकर्ता के लिए बिल्कुल वैसा ही काम करते हैं ।