2010-12-15 15 views
15

मैं लंबे समय से jQuery का उपयोग कर रहा हूं और मैं अपने काम के लिए एक स्लाइड शो प्लगइन लिख रहा हूं और मैं (100% जानबूझकर नहीं) शायद एक ही श्रृंखला में 75% लिखा था। यह पूरी तरह से टिप्पणी की गई है और मैं प्रत्येक end() निर्दिष्ट करता हूं और यह इसे रीसेट कर रहा है, आदि, लेकिन क्या यह धीमा jQuery या डोम लोडिंग धीमा करता है, या, क्या यह वास्तव में इसे गति देता है?लंबे jQuery चेन खराब हैं?

+1

टैग किए गए इस '[प्रदर्शन]' रूप में अच्छी तरह, के बाद से है कि

$(this) .find('.funky') .css('width', 30) .attr('title', 'Funky Title') .end() .fadeIn(); 

ज्यादा बेहतर (और सुरुचिपूर्ण) है से अधिक 2 jQuery $(this) वस्तुओं को बनाने की जरूरत नहीं है मुख्य चिंता यह लगता है :) –

उत्तर

7

यह हमेशा के रूप में आपके विशिष्ट कोड पर निर्भर करता है। एक संदर्भ बनाम .end(), अच्छी तरह से ... वास्तव में लंबी श्रृंखला के साथ, यह तेजी से चेन बनाम .end() कॉल करने के लिए नहीं है, क्योंकि केवल .prevObject संदर्भ जैसे अतिरिक्त सामान (भंडारण/बहाल करना) को संभालना है, .selector, .context, आदि कि आप शायद कई मामलों में परवाह नहीं करते .... और पिछले वस्तुओं के लिए और अधिक अंतर्निहित संदर्भ।

जहां यह अधिक महंगा है मापने के लिए कठिन है ... यह निष्पादन नहीं है (हालांकि यह धीमा है, भले ही infinitesimally) ... यह उन सभी वस्तुओं को बाद में साफ करने के लिए अधिक जटिल कचरा संग्रह है, निर्भरता ग्राफ के बाद से अब बहुत बड़ा है।

अब ... क्या यह मापने योग्य अंतर करेगा? जब तक कि आपकी श्रृंखला वास्तव में लंबी न हो, तब तक शायद माइक्रो-ऑप्टिमाइज़ेशन आपको अधिकांश मामलों में चिंता करने की आवश्यकता नहीं है।

उस समय का 99%, जब तक कि आप कुछ आक्रामक प्रदर्शन दंडित कॉल नहीं कर रहे हैं, इसके बारे में चिंता न करें, जैसा कि अधिकांश माइक्रो-ऑप्टिमाइज़ेशन के साथ है। यदि आपको प्रदर्शन के साथ कोई समस्या हो रही है, तो इसमें शामिल हों।

+1

+1, '.end() ' –

+1

+1 के उपयोग पर अच्छे संकेतों के लिए निर्भरता ग्राफ आकार के संबंध में बिंदु के लिए। – Orbling

+0

धन्यवाद! जानकार अच्छा लगा। मैं कैशिंग, इत्यादि करता हूं, लेकिन इसके लिए कई चयनकर्ता नहीं हैं और कोड सिर्फ थोड़े से बहने वाले होते हैं, इसलिए मैं इसके साथ गया तो मैंने सोचा ... ओह ओह ... यह चीजों को धीमा कर सकता है। –

2

मेरा अनुमान मध्यस्थों की कमी के कारण कोई अंतर या तेज नहीं होगा।

एकमात्र बड़ी कमी स्पष्टता के लिए है, यदि आप टिप्पणियों के माध्यम से सोचते हैं कि यह टिप्पणियों के आधार पर या केवल एक अच्छी तरह से साफ कॉल श्रृंखला के माध्यम से इसे मध्यवर्ती चर के साथ बहु-लाइन बनाये बिना स्पष्ट है।

6

आधुनिक ब्राउज़र में आप जो सबसे महंगी चीजें कर सकते हैं उनमें से एक है डोम तक पहुंच और कुशलतापूर्वक उपयोग करना। चेनिंग आपको वास्तविक लुकअप को कम करने देता है जो आपको करना है, जिसका अर्थ काफी तेज़ कोड हो सकता है। दूसरा विकल्प प्रारंभिक लुकअप करना है, एक चर में स्टोर करें, और उस चर के सब कुछ बंद करें। ऐसा कहा जा रहा है कि, jquery विशेष रूप से उस चेनिंग एपीआई के साथ दिमाग में डिजाइन किया गया था, इसलिए यह श्रृंखला के लिए अधिक मूर्खतापूर्ण है।

4

मुझे लगता है कि jQuery की चेनबिलिटी एक महान विशेषता है ... किसी को वास्तव में इसे अधिक बार उपयोग करना चाहिए। उदाहरण के लिए : -:

$(this).find('.funky').css('width', 30).attr('title', 'Funky Title'); 
$(this).fadeIn(); 
+0

आपको दो jQuery '$ (यह) '...' var obj = $ (this) .find ('funky') बनाने की आवश्यकता नहीं है। Css ('width', 30) .attr ('title' , 'फंकी शीर्षक'); obj।fadeIn(); ' – Matt

+0

बेशक यदि आप इसे एक चर में संग्रहीत करते हैं - लेकिन ऐसा नहीं है कि अधिकांश jQuery उपयोगकर्ता मेरे अनुभव में लिखते हैं, तो वे केवल" दुरुपयोग "$() करते हैं। यही कारण है कि मुझे चेनबिलिटी सुरुचिपूर्ण लगता है - कोई चर पर सस्ता रह सकता है :)। इसके अलावा आप कोड मेरे से अलग हैं ... ('$ (यह) fid ('फंकी') '$ (इस)' – kares

+0

@ मैट के बजाय' ('फंकी') '- यह वही प्रभाव नहीं होगा , आपका 'obj' वैरिएबल कुछ' .ind' तत्वों को संदर्भित करता है, न कि 'यह' :) –

संबंधित मुद्दे