Question

मैं इस jQuery चयनकर्ता का उपयोग कर रहा मेरी JSP में कई बार:

var customer=$('#customers') 

और फिर के लिए ऊपर ग्राहक वस्तु का उपयोग करें:

$("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']") 

समाधान मैं कुछ ब्लॉग पर पाया गया कि मैं पहली बार करना चाहिए है आगे कॉल

customer.find("tbody tr td input[type='checkbox'][name='selectedCustomers']") 

मेरा सवाल है, क्या यह समाधान कोई फर्क नहीं पड़ता और क्यों?

मेरे समझ

मैं

$("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']") 

jQuery आंतरिक रूप से पहली वस्तु div id="customers" के साथ जुड़े हो जाएगी (document.getElementById द्वारा ("ग्राहकों")) करते हैं और उसके बाद के लिए पार किए जाने की निर्दिष्ट checkbox। और अगर मैं तो सुझाव दिया समाधान से जाना document.getElementById("customers") केवल एक बार सक्रिय किए जाएंगे और बाकी एक ही हो जाएगा। तो मैं खुद को अनावश्यक एकाधिक document.getElementById से बचा रहा हूं लेकिन बाकी वही होंगे। क्या मेरी समझ सही है? यदि हां है, तो सिर्फ मेरे ज्ञान के लिए, document.getElementById अधिक महंगा ऑपरेशन है?

संपादित करें: -

मैं केवल ऊपर उपयोग नहीं कर रहा div id = "ग्राहक" के अंतर्गत चयनकर्ता कई बार, लेकिन यह भी अन्य संभावित चयनकर्ता ने कहा। तो सवाल फिर से है कि अगर मैं ग्राहक ऑब्जेक्ट को पहले कैश करता हूं और यदि मैं ऐसा नहीं करता तो प्रदर्शन के संदर्भ में क्या अंतर है?

Answer 1

कोई रास्ता नहीं आप की जरूरत है कि विशिष्ट होना नहीं है। मैं अनुमान लगा रहा हूं, सबसे अधिक, यह:

$('#customers td [name="selectedCustomers"]') 

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

var selectedCustomers = $('#customers td [name="selectedCustomers"]'); 

अन्यथा, अगर नाम गतिशील है, और आप केवल प्रति पृष्ठ ही नाम के साथ एक आइटम है ...

var item = $(document.getElementsByName(someName)[0]); 

दूसरी ओर, $('#customers') कैशिंग, बहुत अधिक व्यर्थ है। .findcustomers पर विशेष रूप से querySelector समर्थन के साथ पहले स्थान पर पूरे चयनकर्ता के रूप में बस के रूप में ज्यादा काम करना होगा।

Answer 2

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

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

हर बार जब आप $("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']") फोन दस्तावेज़ के एक खोज तत्वों के संग्रह बनाने के लिए किसी भी परिवर्तन संग्रह करने के लिए बनाया जा सकता है से पहले किया जाना है।

संग्रह कैशिंग आगे कोई खोजें इसलिए प्रदर्शन में सुधार

/* locate and store the collection once*/ 
var $checkboxes=$("#customers tbody input[name='selectedCustomers']"); 
/* look within previously stored collection*/ 
$checkboxes.filter(/* expression*/).doSomething(); 

document.getElementById का उपयोग करना, एक jQuery खोज की तुलना में तेजी हो जाएगा क्योंकि यह addiitonal फ़ंक्शन कॉल jQuery पुस्तकालय द्वारा किए गए की आवश्यकता नहीं है किए जाने के लिए की जरूरत का मतलब है। $(document.getElementById('foo')) लाभ नहीं होने की संभावना एक भी उपयोग एक वस्तु

Answer 3

तो मैं अपने आप को अनावश्यक कई document.getElementById लेकिन बाकी हिस्सों से बचत कर रहा हूँ कैश करने के लिए के लिए के बारे में चिंता के लायक हैं: आप की तरह एक jQuery वस्तु के रूप में परिणाम का उपयोग करना चाहते लेकिन अगर एक ही हो जाएगा।

हां। लेकिन शायद नहीं, क्योंकि चयनकर्ताओं का मूल्यांकन दाएं से बाएं से किया जाता है (this article या this SO question देखें)। और एक कुशल इंजन मानते हुए, यदि यह पहले #customers और उसके बाद .find() का चयन करता है तो यह केवल कागज़ के पेड़ के एक हिस्से पर मूल्यांकन करता है। लेकिन मैं इसके बारे में 100% निश्चित नहीं हूं।

document.getElementById एक और अधिक महंगा ऑपरेशन है?

नहीं, यह बहुत सस्ता है। आईडी एक तत्व की पहचान करने के लिए मानक विशेषता हैं, और ब्राउज़र इसके लिए बहुत ही प्रदर्शन लुकअप टेबल बनाएंगे - आप इसे लगभग O(1) मान सकते हैं।

customer.find("tbody tr td input[type='checkbox'][name='selectedCustomers']")

दूसरी ओर, डोम चयनकर्ता प्रश्नों जो डोम पेड़ मूल्यांकन करने की जरूरत बहुत महंगे होते हैं, खासकर अगर जे एस कोड (jQuery कड़ाके की धूप) और देशी नहीं में मैन्युअल रूप से किया - हालांकि इस बल्कि सरल क्वेरी देशी querySelectorAll पर नियुक्त किया जाएगा।

मुझे लगता है कि #customers आपकी तालिका तत्व है। तो प्रदर्शन के लिए, tbody tr td टैग को छोड़ दें, वे अनिवार्य हैं (मान लीजिए कि आपने उन्हें <thead>/<tfoot> या <th> तत्वों से चेकबॉक्स को स्पष्ट रूप से बहिष्कृत करने के लिए उपयोग नहीं किया है)। आपको किसी भी तालिका तत्व के प्रत्यक्ष बच्चे के रूप में <input> नहीं मिलेगा - और चयनकर्ता इंजन को बहुत कम करना है।

आगे, यदि आप अपने मार्कअप को अच्छी तरह से जानते हैं और यह धारणा कर सकते हैं कि केवल चेकबॉक्स में name विशेषता है, तो आप टैगनाम को छोड़ सकते हैं और विशेषता चयनकर्ता भी टाइप कर सकते हैं। और इसका मतलब है कि आप देशी getElementsByName, जो प्रदर्शन एक छोटा सा फिर से बढ़ावा देने चाहिए सौंपा जा सकता है:

$(document.getElementById("customers").getElementsByName("selectedCustomers")) 

आप चेक बॉक्स होना करने के लिए तत्वों के लिए जांच करने की जरूरत है, तो आप अभी भी उन्हें फ़िल्टर कर सकते हैं। इसके साथ, आप

$(customer.get(0).getElementsByName("selectedCustomers")).filter(":checkbox") 

हालांकि, प्रदर्शन लाभ प्रमाणित करने के लिए आप केवल परीक्षण, परीक्षण, परीक्षण कर सकते हैं; और आपको इसे अपने वास्तविक पूर्ण पृष्ठ पर करने की आवश्यकता होगी।

Answer 4

http://jsperf.com/different-jquery-selector-tests

चेक बाहर इस छोटे से परीक्षण। मूल रूप से $ ('# div')। ढूंढें ('# पी'); सबसे तेज़ और $ ('div') है। ढूंढें ('# पी'); सबसे धीमा है।