jQuery एकल चयनकर्ता बनाम .find()

Question

जो एक प्रदर्शन परिप्रेक्ष्य के रूप में उपयोग करने के लिए बेहतर है:

$(".div1 h2, .div1 h3") 

या

$(".div1").find("h2, h3") 

Answer 1

आपके प्रश्न का उत्तर है: हाँ।

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

एक विश्लेषण दृष्टिकोण से

:

$(".div1 h2, div1 h3") 

तेजी से jQuery के रूप में होना चाहिए होगा यह querySelectorAll के माध्यम से पाइप (यह मौजूद है) और मूल कोड तेजी से गैर देशी कोड से चलेंगे। यह अतिरिक्त फ़ंक्शन कॉल पर भी सहेजा जाएगा। असल में

$(".div1").find("h2, h3").addClass('foo').end().show(); 

Answer 2

http://jsperf.com/selector-vs-find-again

चयनकर्ता तेजी

(नोट है : यादृच्छिक एचटीएमएल बनाया बस इतना ही यह पृष्ठ पर उन तत्वों नहीं था)

Answer 3

jsPerf का उपयोग करें।

I created one for you।

Answer 4

, .find() तेजी से किया जा सकता:

$(".div1").find("h2, h3") 

बेहतर .div1 पर कुछ अन्य कार्य चेनिंग पर अगर आप की योजना बना रहे है।

एकाधिक तत्वों को चुनने का प्रयास करते समय चयनकर्ता अधिक तेज़ी से प्रतीत होते हैं; हालांकि, अगर आप एक $ .find का उपयोग करें, या यहाँ तक कि वंशज कैश, आप देख सकते हैं यह बहुत तेजी से है: http://jsperf.com/selector-vs-find-again/11

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

Answer 5

मुझे अभी यह जवाब मिला है और यहां कुछ संख्याएं जोड़ना चाहते हैं, तो कोई उन्हें सहायक और उत्सुकता से ढूंढ सकता है। मेरे मामले में मैंने अद्वितीय तत्व के लिए सबसे तेज़ jQuery चयनकर्ता की तलाश की। मैं बिना कारण के आईडी जोड़ना पसंद नहीं करता, इसलिए मैंने आईडी के बिना तत्वों का चयन करने का तरीका देखा।

मेरे छोटे शोध में मैंने jQuery के लिए अद्भुत selector profiler का उपयोग किया।

$.profile.start() 
// Lets 
for (i = 0; i < 10000; i++) { 

    // ID with class vs. ID with find(class) 
    $("#main-menu .top-bar"); 
    $("#main-menu").find(".top-bar"); 

    // Class only vs element with class 
    $(".top-bar"); 
    $("nav.top-bar"); 

    // Class only vs class-in-class 
    $(".sticky"); 
    $(".contain-to-grid.sticky"); 
} 
$.profile.done() 

यहाँ परिणाम::

jQuery profiling started... 
Selector     Count Total Avg+/-stddev 
#main-menu .top-bar  10000 183ms 0.01ms+/-0.13 
nav.top-bar    10000 182ms 0.01ms+/-0.13 
.contain-to-grid.sti... 10000 178ms 0.01ms+/-0.13 
.top-bar     10000 116ms 0.01ms+/-0.10 
.sticky     10000 115ms 0.01ms+/-0.10 
#main-menu    10000 107ms 0.01ms+/-0.10 
undefined 

सबसे धीमा चयनकर्ताओं इस चार्ट के शीर्ष पर हैं और यहाँ कोड मैं क्रोम कंसोल से सीधे निकाल दिया बाद मैं प्रोफाइलर के पुस्तकालय कोड जोड़ा है। सबसे तेज़ लोग नीचे हैं। आईडी के चयनकर्ता के बाद आश्चर्यजनक रूप से मेरे लिए $('#main-menu') मुझे सिंगल क्लास चयनकर्ता मिला है उदा। .top-bar और .sticky। चीयर्स!