$ ("# foo .bar") और $ ("। Bar", "#foo") के प्रदर्शन की तुलना में

Question

getById.getByClassName बनाम qSA तुलना के लिए नीचे स्क्रॉल करें! वहाँ

$('.bar', '#foo') 

:

---

अगर हम जो आईडी "foo" साथ तत्व के अंदर कर रहे हैं वर्ग "bar" के सभी तत्वों का चयन करना चाहता था, हम इस लिख सकते हैं:

$('#foo .bar') 

या इस निश्चित रूप से इसे प्राप्त करने के लिए अन्य विधियां हैं, लेकिन इस प्रश्न के लिए, आइए इन दो तरीकों की तुलना करें।

तो, उपर्युक्त तरीकों में से कौन सा बेहतर प्रदर्शन करता है? (जो कम समय पर अमल करने की जरूरत है?)

मैं इस प्रदर्शन परीक्षण में लिखा है:

(function() { 
    var i; 

    console.time('test1'); 
    for(i = 0; i < 100; i++) { 
     $('#question-mini-list .tags'); 
    } 
    console.timeEnd('test1'); 

    console.time('test2'); 
    for(i = 0; i < 100; i++) { 
     $('.tags', '#question-mini-list'); 
    } 
    console.timeEnd('test2'); 
})(); 

आप स्टैक ओवरफ़्लो पर सांत्वना के भीतर से यह निष्पादित करने के लिए शुरू पेज है। मेरे परिणाम हैं:

फ़ायरफ़ॉक्स:
test1: ~ 90ms
test2: ~ 18ms

क्रोम:
test1: ~ 65ms
test2: ~ 30ms

ओपेरा:
test1: ~ 50ms
test2: ~ 100ms

तो फ़ायरफ़ॉक्स और क्रोम में, टी वह दूसरी विधि कई गुना तेज है - जैसा कि मैंने उम्मीद की थी। हालांकि, ओपेरा में स्थिति उलट दी गई है। मुझे आश्चर्य है कि यहाँ क्या हो रहा है।

क्या आप कृपया अपनी मशीन पर परीक्षण चला सकते हैं और समझा सकते हैं कि क्यों ओपेरा अलग-अलग प्रदर्शन करता है?

---

अद्यतन

मैं इस परीक्षण लिखा है आदेश की जांच करने के लिए कि क्या ओपेरा QSA वास्तव में सुपर फास्ट है में,। जैसा कि यह पता चला है, यह है।

(function() { 
    var i, limit = 5000, test1 = 'test1', test2 = 'test2'; 

    console.time(test1); 
    for(i = 0; i < limit; i += 1) { 
     document.getElementById('question-mini-list').getElementsByClassName('tags'); 
    } 
    console.timeEnd(test1); 

    console.time(test2); 
    for(i = 0; i < limit; i += 1) { 
     document.querySelectorAll('#question-mini-list .tags'); 
    } 
    console.timeEnd(test2); 
})(); 

फिर, आपको इस कोड को स्टैक ओवरफ़्लो स्टार्ट-पेज पर कंसोल के भीतर से चलाने के लिए है। मैंने IE9 के लिए फायरबग लाइट बुकमार्कलेट का उपयोग किया (क्योंकि वह ब्राउज़र console.time लागू नहीं करता है)।

document.getelementById('A').getElementsByClassName('B'); 

इस विधि को

:

document.querySelectorAll('#A .B'); 

मैं हर ब्राउज़र में ऊपर स्क्रिप्ट लगातार पांच बार मार डाला गया है

तो, मैं इस विधि की तुलना में।अंकगणित साधन हैं:

(सभी संख्या मिलीसेकेंड में कर रहे हैं।)

तो, पहली विधि का प्रदर्शन काफी परीक्षण किया ब्राउज़रों (16-36ms) में एक ही है। हालांकि, पहली विधि की तुलना में क्यूएसए बहुत धीमी है, ओपेरा में यह वास्तव में तेज़ है!

तो, QSA अनुकूलन संभव है, मुझे आश्चर्य है कि क्या अन्य ब्राउज़र के लिए ...

Answer 1

jQuery/Sizzle जावास्क्रिप्ट आधारित Sizzle इंजन का उपयोग करने से बच जाएगा यदि ब्राउज़र querySelectorAll का समर्थन करता है, और यदि आप एक वैध चयनकर्ता (कोई कस्टम, गैर-सीएसएस चयनकर्ता) पास करते हैं।

इसका मतलब यह है कि आप अंततः querySelectorAll के कार्यान्वयन की तुलना कर रहे हैं, मानते हैं कि आप इसका समर्थन करने वाले ब्राउज़र का परीक्षण कर रहे हैं।

अन्य अनुकूलन हैं जो jQuery या Sizzle का उपयोग करता है, इसलिए विभिन्न ब्राउज़रों में विभिन्न प्रकार के डीओएम चयन की तुलना करते समय यह मुश्किल है।

ओपेरा के प्रदर्शन के परिणाम का कारण यह लगता है कि उनके पास बहुत ही अनुकूल querySelectorAll कार्यान्वयन है। qSA, अपेक्षाकृत नई विधि होने के नाते, getElementsByTagName जैसी पुरानी विधियों की तुलना में कुछ ब्राउज़रों में अनुकूलित नहीं किया गया है।

Answer 2

इंतजार कर रहे हैं और विजेता है ....

परीक्षण 3$('#question-mini-list').find('.tags');

• test1: 25ms
• test2: 1 9एमएस
• test3: 10ms

आपके द्वारा सुझाए गए दो तरीकों के बराबर नहीं हैं।

परीक्षण 1: दाएं से बाएं सिज़ल पार्स (पृष्ठ पर कभी भी तत्व खोजने के लिए न पूछें, फिर आईडी पर प्रतिबंधित करें)।

परीक्षण 2: संदर्भ के रूप में एक स्ट्रिंग का उपयोग आमतौर पर कोई उपयोग नहीं है, संदर्भ के रूप में तत्वों का उपयोग करें।

परीक्षण 3: आईडी के साथ तत्व ढूंढना तेजस्वी तेज है। एक बार जब आप वहां हों तो किसी दिए गए वर्ग के किसी आइटम पर ध्यान केंद्रित करने की हवा होती है।

Answer 3

के लिए, इस 30x तेजी से होता है:

document.getElementById("foo").getElementsByClassName("bar"); 

देखें jsPerf: http://jsperf.com/jquery-selector-variations/3। आईई के पुराने संस्करणों में काम करने के लिए इसे एक शिम की आवश्यकता होगी।

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