क्या jQuery ट्रैवर्सल चयनकर्ताओं पर पसंदीदा है?

Question

$("#vacations").find("li").last() का उपयोग कर रहा है $("#vacations li:last") से बेहतर अभ्यास है?

पृष्ठभूमि और मेरे विचार:

मैं के साथ खेल रहा था एक अच्छा इंटरैक्टिव try jQuery tutorial और कार्यों में से एक का कहना है:

आप अपने कोड के माध्यम से देख रहे हैं के रूप में, आपको लगता है कि किसी और को चुन रही है अंतिम छुट्टी के साथ: $ ("# छुट्टियां ली: आखिरी")। आप इसे देखते हैं और आप सोचते हैं, "ट्रैवर्सल इस तरह से तेज़ी से बना देगा!" आपको उन विचारों पर कार्य करना चाहिए, इसके बजाय ट्रैवर्सल का उपयोग करके # vacations के भीतर अंतिम ली खोजने के लिए इस कोड को दोबारा दोहराएं।

मुझे ऐसा क्यों लगता है? मेरे लिए चयनकर्ताओं का उपयोग ट्रैवर्सिंग की तुलना में थोड़ा अधिक स्तर दिखता है। मेरे दिमाग में जब मैं एक चयनकर्ता निर्दिष्ट कर रहा हूं तो यह jQuery पर निर्भर करता है कि मुझे एक भी परिणाम को बेहतर तरीके से प्राप्त करने के लिए (अंतरिम परिणामों को वापस करने की आवश्यकता के बिना)।

समग्र चयनकर्ताओं का उपयोग करने के अतिरिक्त ओवरहेड क्या है? क्या ऐसा इसलिए है क्योंकि चयनकर्ता तर्क का वर्तमान कार्यान्वयन सिर्फ स्ट्रिंग को पार करता है और ट्रैवर्सल एपीआई का उपयोग करता है? धीमी गति से एक स्ट्रिंग पार्स कर रहा है? क्या कोई मौका है कि भविष्य में कार्यान्वयन इस तथ्य का उपयोग करेगा कि इसे अंतरिम परिणामों को वापस करने की आवश्यकता नहीं है और यह ट्रैवर्सल से तेज होगा?

Answer 1

इसका कोई कट और सूखा जवाब नहीं है, लेकिन :last चयनकर्ता के संबंध में आप चयन कर रहे हैं, यह चयनकर्ता API मानक के लिए एक मालिकाना विस्तार है। इस वजह से, मूल .querySelectorAll विधि के साथ उपयोग करने के लिए मान्य नहीं है।

क्या Sizzle मूल रूप से .querySelectorAll के साथ अपने चयनकर्ता का उपयोग करने का प्रयास करता है, और यदि यह किसी अमान्य चयनकर्ता के कारण अपवाद फेंकता है, तो यह पूरी तरह जावास्क्रिप्ट आधारित डॉम चयन/फ़िल्टरिंग के लिए डिफ़ॉल्ट होगा।

इसका मतलब है कि :last जैसे चयनकर्ताओं को मूल कोड के साथ डीओएम चयन की गति वृद्धि नहीं मिल जाएगी।

इसके अलावा, अनुकूलन भी शामिल हैं ताकि जब आपका चयनकर्ता बहुत ही सरल हो, जैसे कि केवल एक आईडी या तत्व का नाम, मूल getElementById और getElementsByTagName का उपयोग किया जाएगा, जो बहुत तेज़ हैं; आम तौर पर querySelectorAll से भी तेज।

और .last() विधि सिर्फ बजाय सभी आइटम, जो कड़ाके की धूप फिल्टर सामान्य रूप से करना है छानने के संग्रह में अंतिम आइटम पकड़ लेता है के बाद से (कम से कम वे करते थे), वह भी एक बढ़ावा दे देंगे।

आईएमओ, स्वामित्व वाली सामग्री से दूर रहें। अब .querySelectorAll बहुत अधिक सर्वव्यापी है, केवल मानक-अनुरूप चयनकर्ताओं का उपयोग करने के वास्तविक फायदे हैं। डीओएम चयन के बाद कोई और फ़िल्टरिंग करें।

---

$("#vacations").find("li") के मामले में, अंतरिम परिणामों के बारे में चिंता मत करो। यह getElementById का उपयोग करेगा, इसके बाद getElementsByTagName होगा, और यह बहुत तेज़ होगा।

यदि आप वास्तव में गति के बारे में चिंतित हैं, तो jQuery के उपयोग को कम करें, और सीधे डीओएम का उपयोग करें।

---

आप वर्तमान में :last तरह चयनकर्ताओं के लिये दस्तावेज में नोट, कि प्रदर्शन हानि के बारे में चेतावनी मिल जाएगा:

क्योंकि: पिछले सीएसएस विनिर्देशन का एक jQuery विस्तार और नहीं हिस्सा है, :last का उपयोग करने वाले प्रश्न मूल DOM querySelectorAll() विधि द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ नहीं उठा सकते हैं। तत्वों का चयन करने के लिए :last का उपयोग करते समय सर्वश्रेष्ठ प्रदर्शन प्राप्त करने के लिए, पहले शुद्ध सीएसएस चयनकर्ता का उपयोग कर तत्वों का चयन करें, फिर .filter(":last") का उपयोग करें।

लेकिन मैं असहमत हूं कि .filter(":last") एक अच्छा विकल्प होगा। .last() जैसी विधियां बहुत बेहतर होंगी जो सेट को फ़िल्टर करने के बजाय सीधे तत्व को लक्षित करेगी। मुझे एहसास है कि वे चाहते हैं कि लोग अपने गैर-मानक-अनुरूप चयनकर्ताओं का उपयोग जारी रखें। आईएमओ, आप बस उनके बारे में भूलने के बेहतर हैं।

Answer 2

यहाँ अपने स्थापना के लिए एक परीक्षण है: http://jsperf.com/andrey-s-jquery-traversal

Sizzle, jQuery के चयनकर्ता इंजन, regex के साथ स्ट्रिंग पार्स करके getElementById और getElementsByTagName का उपयोग करके बहुत ही बुनियादी चयनकर्ताओं तेजी लाने के लिए कोशिश करता है। अपने चयनकर्ता कुछ भी #foo और img तुलना में अधिक जटिल है, तो वह है जो केवल वैध CSS चयनकर्ताओं (कोई :radio, :eq, :checkbox या अन्य jQuery विशेष छद्म चयनकर्ताओं) स्वीकार करता है querySelectorAll उपयोग करने के लिए, की कोशिश करेंगे।

चयनकर्ता स्ट्रिंग दोनों कम पढ़ने योग्य और धीमी है, इसलिए इसका उपयोग करने का वास्तव में कोई कारण नहीं है।

सरल हिस्सा है कि कड़ाके की धूप जल्दी से पार्स कर सकते हैं (#id और tagname) में चयनकर्ता स्ट्रिंग को तोड़ने के द्वारा, आप मूल रूप से सिर्फ एक साथ चेनिंग रहे getElementById और getElementsByTagName करने के लिए कॉल, जिसके बारे में के रूप में तेजी से के रूप में आप प्राप्त कर सकते है।