JQuery में वंश तत्वों का चयन करने के लिए सबसे तेज़ तरीका क्या है?

Question

जहाँ तक मुझे पता है, jQuery में बाल तत्वों के चयन के कई तरीके हैं ।

//Store parent in a variable  
var $parent = $("#parent");

विधि 1 (एक स्कोप का उपयोग करके)

$(".child", $parent).show();

विधि 2 (खोजें () विधि)

$parent.find(".child").show();

विधि 3 (केवल तत्काल बच्चों के लिए)

$parent.children(".child").show();

विधि 4 (CSS चयनकर्ता के माध्यम से) - @spinon द्वारा सुझाई गई

$("#parent > .child").show();

विधि 5 ( विधि 2 के समान ) - @ केकई के अनुसार

$("#parent .child").show();

मैं प्रोफाइलिंग से परिचित नहीं हूं कि मैं स्वयं इसकी जांच कर सकूं, इसलिए मुझे यह देखना अच्छा लगेगा कि आपको क्या कहना है।

पुनश्च मैं समझता हूँ कि यह इस प्रश्न का एक संभावित डुप्लिकेट है, लेकिन यह सभी तरीकों को कवर नहीं करता है।

Comments

इसके अलावा, @spinon - क्या यह केवल तात्कालिक बच्चों के लिए है? CSS युक्ति कहता है "किसी भी F तत्व से मेल खाता है जो एक तत्व E का बच्चा है।"

— मार्को

आपको वास्तव में चिंता करने की ज़रूरत नहीं है कि कौन सा तेज़ है (जब तक कि आप वास्तव में बड़ा डोम हेरफेर नहीं कर रहे हैं) ... jQuery का निर्माण तेजी से किया गया था ...

— रीगेल

मेरे पास 2MB की HTML फ़ाइल है, यह मत पूछो कि कैसे या क्यों :)

— Marko

हाँ। पहले स्तर के वंशज ही।

— स्पिन

एक और तरीका है। $ ("# माता-पिता। बच्चों")। शो (); जो # 2 के तरीके के समान है। :)

— काई

Answer 1

विधि 1 और विधि 2 समान अंतर के साथ समान हैं, विधि 1 को पारित गुंजाइश को पार्स करने की आवश्यकता है और इसे कॉल करने के लिए अनुवाद करना है $parent.find(".child").show();।

विधि 4 और विधि 5 दोनों को चयनकर्ता को पार्स करने की आवश्यकता है और फिर बस कॉल करें: $('#parent').children().filter('.child')और $('#parent').filter('.child')क्रमशः।

इसलिए विधि 3 हमेशा सबसे तेज़ होगी क्योंकि इसे कम से कम काम करने की ज़रूरत है और प्रथम-स्तरीय बच्चों को प्राप्त करने के लिए सबसे सीधी विधि का उपयोग करती है।

यहाँ अनुराग की संशोधित गति परीक्षणों के आधार पर: http://jsfiddle.net/QLV9y/1/

गति परीक्षण: (अधिक बेहतर है)

पर क्रोम , विधि 3 सबसे अच्छा तो विधि 1/2 और फिर 4/5 है

पर फ़ायरफ़ॉक्स , विधि 3 अभी भी सबसे अच्छा तो विधि 1/2 और फिर 4/5 है

पर ओपेरा , विधि 3 अभी भी सबसे अच्छा तो विधि 4/5 और फिर 1/2 है

पर आईई 8 , जबकि धीमी समग्र अन्य ब्राउज़र से अधिक, यह अभी भी विधि 3, 1,2,4,5 आदेश इस प्रकार है।

कुल मिलाकर, विधि 3 का उपयोग करने के लिए सबसे अच्छा तरीका है, इसे सीधे कहा जाता है और यह विधि 1/2 के विपरीत बाल तत्वों के एक से अधिक स्तरों को पार करने की आवश्यकता नहीं है और इसे विधि 4/5 की तरह पार्स करने की आवश्यकता नहीं है

हालाँकि, ध्यान रखें कि इनमें से कुछ में हम सेब की तुलना संतरे से कर रहे हैं क्योंकि विधि 5 प्रथम स्तर के बच्चों की बजाय सभी बच्चों को देखता है।

Comments

समान रूप से आपका मतलब है कि वे दोनों खोज के लिए एक ही तर्क का उपयोग करते हैं?

— मार्को

क्या आपका मतलब यह नहीं है कि विधि 1 और 2 समान हैं?

— गुफा जूल 5'10

धन्यवाद @Aaron - मैं यह देखना चाहता हूं कि दूसरे क्या सोचते हैं, मैं आपके उत्तर को स्वीकार करूंगा यदि सभी सहमत हैं। चीयर्स :)

— मार्को

@ जेपी, मेरा मतलब है कि इसे पहचानने के लिए अतिरिक्त समय लेने की जरूरत है कि इसे $parent.find(".child");कमांड में अनुवाद करने के लिए एक गुंजाइश पारित की जा रही है ।

— हारून हारून

@Aaron @Marko - परीक्षण थोड़े तिरछे हो सकते हैं क्योंकि हम हमेशा रूट नोड को संदर्भ के रूप में उपयोग कर रहे हैं, और दस्तावेज़ बहुत बड़ा है। इसके बावजूद, मैं 20 ऑप्स के भीतर 1 और 2 लाइन अप देख रहा हूं / अधिकांश रन पर एक दूसरे को सेक। 1 और 2 की तुलना में, 4 लगभग 100-200 ऑप्स धीमा है, और 5 लगभग 400 ऑप्स स्लो है जो समझ में आता है क्योंकि यह सभी वंशजों के माध्यम से जाता है, न कि सिर्फ बच्चों के लिए। चार्ट - smallurl.com/25p4dhq

— अनुराग

Answer 2

विधि 1

JQuery का उपयोग करके छोटा और तेज नहीं किया जा सकता। यह कॉल सीधे नीचे जाता है $(context).find(selector)( विधि 2 , अनुकूलन के कारण) जो बदले में, कॉल करता है getElementById।

विधि 2

एक ही कर रहा है, लेकिन कुछ अनावश्यक आंतरिक फ़ंक्शन कॉल के बिना।

विधि 3

उपयोग करने children()की तुलना में उपयोग करने में तेज है find(), लेकिन निश्चित रूप से, children()केवल मूल तत्व के प्रत्यक्ष बच्चे पाएंगे , जबकि find()सभी बाल हाथी (उप-बाल तत्वों सहित) के लिए पुनरावर्ती टॉप-डाउन की खोज करेंगे।

विधि 4

इस तरह के चयनकर्ताओं का उपयोग करना, धीमा होना है। चूंकि sizzle(जो कि jQuery से चयनकर्ता इंजन है) दाएं से बाएं काम करता है , यह .childपहले सभी वर्गों से मेल खाएगा यदि यह दिखता है कि वे आईडी 'माता-पिता' से एक प्रत्यक्ष बच्चे हैं।

विधि 5

जैसा कि आपने सही कहा है, यह कॉल फ़ंक्शन के $(context).find(selector)भीतर कुछ अनुकूलन के कारण, एक कॉल भी बनाएगा jQuery, अन्यथा यह (धीमी) के माध्यम से भी जा सकता है sizzle engine।

Comments

आप var $ पैरेंट = $ ("# पेरेंट") के बारे में बात नहीं कर रहे हैं? मैं नहीं देख सकता कि कैसे तत्व 1 getElementById का उपयोग कर सकता है जब तत्व में एक वर्ग होता है?

— मार्को

मैं सहमत होना चाहता था लेकिन, विधि 1 में, डॉक्स कहते हैं, Internally, selector context is implemented with the .find() method-प्लीज अपडेट, मुझे पता है कि आप ओपी के लेबल पर भ्रमित हो गए हैं :)

— रीगेल

@ रीगेल: सच तय है कि। @ मार्को: पार्सिंग #parentएक आईडी का प्रतिनिधित्व करता है, अगर यह एक वर्ग है, तो यह getElementByIdस्पष्ट रूप से उपयोग नहीं करेगा ।

— jAndy

Answer 3

जैसा कि यह एक पुरानी पोस्ट है, और समय के साथ चीजें बदल जाती हैं। मैंने पिछले ब्राउज़र संस्करणों पर अब तक कुछ परीक्षण किए हैं, और मैं गलतफहमी से बचने के लिए इसे यहां पोस्ट कर रहा हूं।

HTML5 और CSS3 के संगत ब्राउज़रों पर jQuery 2.1 का उपयोग करने से प्रदर्शन में बदलाव होता है।

यहाँ परीक्षण परिदृश्य और परिणाम है:

function doTest(selectorCallback) {
    var iterations = 100000;

    // Record the starting time, in UTC milliseconds.
    var start = new Date().getTime();

    for (var i = 0; i < iterations; i++) {
        // Execute the selector. The result does not need to be used or assigned
        selectorCallback();
    }

    // Determine how many milliseconds elapsed and return
    return new Date().getTime() - start;
}

function start() {
    jQuery('#stats').html('Testing...');
    var results = '';

    results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms";
    results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms";
    results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms";
    results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms";
    $parent = jQuery('#parent');
    results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms";

    jQuery('#stats').html(results);
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" />
    <title>HTML5 test</title>
    <script src="//code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<div id="stats"></div>
<button onclick="start()">Test</button>

<div>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

</body>
</html>

तो, 100 000 पुनरावृत्तियों के लिए मुझे मिलता है:

(मैंने उन्हें स्वरूपण प्रयोजनों के लिए img के रूप में जोड़ा है।)

आप परीक्षण करने के लिए खुद कोड स्निपेट चला सकते हैं;)

Comments

ओह! फिर लगता .find()है कि बहुत अच्छा काम करता है। इसका उपयोग करना जारी है। :)

— एंड्रयू सर्डू