JQuery में सबसे तेज़ बच्चे () या ढूंढें () क्या हैं?

Question

JQuery में एक बच्चे के नोड का चयन करने के लिए एक बच्चे का उपयोग कर सकते हैं (), लेकिन यह भी खोजें ()।

उदाहरण के लिए:

$(this).children('.foo');

के रूप में एक ही परिणाम देता है:

$(this).find('.foo');

अब, कौन सा विकल्प सबसे तेज या पसंदीदा है और क्यों?

Comments

.find()और .children()समान नहीं हैं। उत्तरार्द्ध केवल डोम पेड़ के नीचे एक एकल स्तर का चयन करता है, एक बच्चे के चयनकर्ता की तरह।

— तीमुथियुस 3

@ टिमोथी003 आपने इसे गलत बताया है, पूर्ववर्ती ने एकल स्तर की यात्रा की, जो बाद में नहीं रही

— दिपेश राणा

@DipeshRana ने 'बाद' को टिमोथी003 के अपने वाक्य पर लागू किया, सवाल नहीं।

— जयेश भूत

इस मुद्दे को लाने के लिए धन्यवाद। कई मामलों में प्रदर्शन अंतर तुच्छ है, लेकिन डॉक्स वास्तव में इस बात का उल्लेख नहीं करते हैं कि ये दोनों विधियां अलग-अलग लागू हैं! सर्वोत्तम प्रथाओं के लिए, यह जानना अच्छा है कि find()लगभग हमेशा तेज होता है।

— स्टीव बेनर

इसलिए मुझे अंग्रेजी में "पूर्व" या "बाद वाला" निर्माण पसंद नहीं आया। आप जो कहें, वही कहें। शीश।

— क्रिस वॉकर

Answer 1

children()केवल नोड के तत्काल बच्चों को देखता है, जबकि find()नोड के नीचे पूरे डोम का पता लगाता है, इसलिए तेजी से समान कार्यान्वयन दिया children() जाना चाहिए। हालाँकि, देशी ब्राउज़र विधियों find()का उपयोग करता है , जबकि ब्राउज़र में व्याख्या की गई जावास्क्रिप्टchildren() का उपयोग करता है। मेरे प्रयोगों में विशिष्ट मामलों में बहुत अधिक अंतर नहीं है।

कौन सा उपयोग करना है यह इस बात पर निर्भर करता है कि क्या आप केवल DOM में इस एक के नीचे के तत्काल वंशज या सभी नोड्स पर विचार करना चाहते हैं, अर्थात, आप जो परिणाम चाहते हैं उसके आधार पर उपयुक्त विधि चुनें, न कि विधि की गति। यदि प्रदर्शन वास्तव में एक समस्या है, तो सबसे अच्छा समाधान खोजने के लिए प्रयोग करें और इसका उपयोग करें (या अन्य उत्तरों में कुछ बेंचमार्क देखें)।

Comments

यकीन है, लेकिन क्या होता है अगर मूल तत्व में केवल बच्चे के नोड होते हैं? मैं इस पर कुछ रूपरेखा करने जा रहा हूँ।

— जेसन

बच्चों बनाम खोज का प्रदर्शन ब्राउज़र पर निर्भर करता है कि डोम-सबट्री आपकी खोज कितनी जटिल है। आधुनिक ब्राउजर पर () आंतरिक रूप से querySelectorAll का उपयोग करता है जो आसानी से जटिल चयनकर्ता में बच्चों को () और छोटे से मध्यम DOM सबट्री को आउटपरफॉर्म कर सकता है।

— LeJared

आपके प्रयोगों के कुछ मात्रात्मक परिणाम प्रदान करने में मदद करेगा।

— ल्यूक

5 और 20 के बीच पदानुक्रम घोंसले के साथ सभी परीक्षणों में मेरे लिए (हमेशा आउटपरफॉर्म किए गए बच्चे) ()। (Google Chrome 54 में परीक्षण किया गया) मुझे इसके विपरीत की उम्मीद थी। तो अब से, मैं आसान तरीका

— अपनाऊंगा

Answer 2

यह jsPerf परीक्षण बताता है कि खोज () तेज है। मैंने एक अधिक गहन परीक्षण बनाया , और यह अभी भी लग रहा है कि बच्चों को खोज () आउटपरफॉर्म करें।

अद्यतन: tvanfosson की टिप्पणी के अनुसार, मैंने घोंसले के 16 स्तरों के साथ एक और परीक्षण मामला बनाया । खोज () केवल तभी संभव है जब सभी संभव div को खोजा जाए, लेकिन div के पहले स्तर का चयन करते समय () अभी भी बच्चों से बेहतर प्रदर्शन करते हैं।

बच्चों () को खोजने के लिए बेहतर प्रदर्शन शुरू होता है () जब घोंसले के 100 से अधिक स्तर होते हैं और पता लगाने के लिए () खोजने के लिए लगभग 4000+ divs होते हैं। यह एक अल्पविकसित परीक्षण मामला है, लेकिन मुझे अभी भी लगता है कि ज्यादातर मामलों में बच्चों () की तुलना में खोज () तेज है।

मैंने Chrome डेवलपर टूल में jQuery कोड के माध्यम से कदम रखा और देखा कि बच्चे () आंतरिक रूप से भाई-बहन (), फ़िल्टर () को कॉल करते हैं, और खोज () की तुलना में कुछ अधिक regexes से गुजरते हैं।

खोज () और बच्चे () विभिन्न आवश्यकताओं को पूरा करते हैं, लेकिन उन मामलों में जहां खोज () और बच्चे () एक ही परिणाम का उत्पादन करेंगे, मैं खोज () का उपयोग करने की सलाह दूंगा।

Comments

ऐसा लगता है कि बच्चे डोम ट्रैवर्सल तरीकों का उपयोग करते हैं और चयनकर्ता एपी का उपयोग करते हैं, जो तेज है।

— टॉपेक

आप केवल घोंसले के शिकार का एक स्तर है के बाद से बहुत पतले परीक्षण के मामले। यदि आप सामान्य मामला चाहते हैं, तो आपको कुछ मनमाने तरीके से घोंसले बनाने की गहराई तय करनी होगी और प्रदर्शन को जांचना होगा (क्योंकि) बच्चों की तुलना में गहरे पेड़ों को खोजता है ()।

— tvanfosson

यदि आप देख रहे हैं कि क्या एक विशिष्ट एकवचन बाल तत्व (जैसे। Event.target) एक विशिष्ट डोम तत्व में है (उदाहरण के लिए $ ('। Navbar')) तो $ .contains (यह, event.target) अब तक सबसे तेज़ है। (8,433,609 / सेकंड बनाम 140k सबसे तेज़ jquery खोज के लिए)। jsperf.com/child-is-in-parent

— क्रिस सैटिंगर

Answer 3

यहां एक लिंक दिया गया है जिसमें एक प्रदर्शन परीक्षण है जिसे आप चला सकते हैं। find()वास्तव में की तुलना में 2 गुना तेज है children()।

Comments

$। यदि आपके पास विशिष्ट तत्व हैं और बस जानना चाहते हैं कि क्या बी ए में है तो यह सबसे अच्छा है। jsperf.com/child-is-in-parent

— क्रिस सैटिंगर

अच्छा परीक्षण। ध्यान दें कि यह और भी तेज हो सकता है यदि आप कुछ ऐसा करते हैं var $test = $list.find('.test');जहां $ सूची jQuery ऑब्जेक्ट है। jsperf.com/jquery-selectors-context/101

— Maciej Krawczyk

Answer 4

वे अनिवार्य रूप से एक ही परिणाम नहीं देंगे: find()आपको कोई वंशज नोड children()मिलेगा , जबकि केवल आपको तत्काल बच्चे मिलेंगे जो मैच करते हैं।

एक बिंदु पर, find()यह बहुत धीमा था क्योंकि इसे प्रत्येक वंश के नोड की तलाश करनी थी जो एक मैच हो सकता है, और न केवल तत्काल बच्चे। हालाँकि, यह अब सच नहीं है; find()देशी ब्राउज़र विधियों का उपयोग करने के कारण बहुत तेज है।

Comments

अन्य उत्तरों के अनुसार नहीं हाहा: पी। केवल तभी जब आपके पास बहुत, बहुत, बहुत बड़ा DOM ट्री हो ..

— pgarciacamou

@Camou यह उत्तर चार साल पुराना है। find()उस समय बहुत धीमी थी!

— जॉन फेमिनाला

@camou कह रहा है कि प्रदर्शन का हिस्सा "अन्य उत्तरों के अनुसार नहीं था"। इस उत्तर का पहला पैराग्राफ सटीक है।

— डॉन चेडल

Answer 5

अन्य उत्तर में से कोई भी उपयोग .children()या केवल एक मूल तत्व के तत्काल बच्चों की खोज .find(">")करने के मामले से निपटा । इसलिए, मैंने बच्चों को अलग करने के तीन अलग-अलग तरीकों का उपयोग करके, पता लगाने के लिए एक jsPerf परीक्षण बनाया ।

जैसा कि होता है, अतिरिक्त ">" चयनकर्ता का उपयोग करते समय भी, .find()अभी भी बहुत तेजी से होता है .children(); मेरे सिस्टम पर, 10x तो।

इसलिए, मेरे दृष्टिकोण से, फ़िल्टरिंग तंत्र का उपयोग करने के लिए बहुत अधिक कारण नहीं दिखाई देते हैं .children()।

Comments

इस टिप्पणी के लिए धन्यवाद! मुझे आश्चर्य है कि अगर jQuery को केवल .children (x) बनाने के लिए स्विच करना चाहिए। .find (">" "+ x) के लिए एक उपनाम होना चाहिए, हालांकि शायद अन्य जटिलताएं हैं जिनके बारे में मैं नहीं सोच रहा हूं।

— माइकल स्कॉट कथबर्ट

यह सबसे उपयुक्त तुलना की तरह लगता है। धन्यवाद!

— गोल्जियर

Answer 6

मिलान किए गए तत्वों के बच्चे को फ़िल्टर करने के लिए दोनों find()और children()विधियों का उपयोग किया जाता है, सिवाय इसके कि पूर्व किसी भी स्तर से नीचे की यात्रा करता है, बाद वाला एक एकल स्तर नीचे यात्रा करता है।

सरल करने के लिए:

1. find() - मिलान तत्वों के बच्चे, पोते, महान-पोते के माध्यम से खोजें ... सभी स्तर नीचे।
2. children() - मिलान किए गए तत्वों के बच्चे (केवल एकल स्तर नीचे) के माध्यम से खोजें।