बेहतर प्रदर्शन के लिए छह jQuery के सर्वश्रेष्ठ अभ्यास

jQuery इनमें से एक है सबसे लोकप्रिय जावास्क्रिप्ट लाइब्रेरी आज। इसकी एपीआई बहुत आसान सीखने की अवस्था के लिए अग्रणी का उपयोग करने के लिए बहुत आसान है। डायनेमिक फ़ंक्शंस में लाने के लिए बहुत सारे प्रोजेक्ट सीधे वैनिला जावास्क्रिप्ट का उपयोग करने के बजाय jQuery कोड का उपयोग करते हैं.

लेकिन jQuery की अपनी कमियाँ भी हैं. लापरवाही बरतने पर यह कुछ प्रदर्शन मुद्दों को जन्म दे सकता है भाषा की तरह यह पर आधारित है। यह पोस्ट jQuery का उपयोग करने में कुछ सर्वोत्तम प्रथाओं को सूचीबद्ध करेगी जो हमें किसी भी प्रदर्शन के मुद्दों से बचने में मदद करेगी.

1. आलसी लोड स्क्रिप्ट जब जरूरत होती है

DOM ट्री बनाने और स्क्रीन पर पिक्सल्स पेंट करने से पहले ब्राउजर जावास्क्रिप्ट चलाते हैं, क्योंकि स्क्रिप्ट पेज में नए एलिमेंट्स जोड़ सकते हैं या कुछ DOM नोड्स के लेआउट या स्टाइल को बदल सकते हैं। तो, द्वारा पृष्ठ लोड के दौरान निष्पादित करने के लिए ब्राउज़र को कम स्क्रिप्ट देना, हम कर सकते हैं कम समय लगता है अंतिम DOM ट्री निर्माण और पेंटिंग के लिए, जिसके बाद उपयोगकर्ता होगा पृष्ठ को देखने में सक्षम.

JQuery में ऐसा करने का एक तरीका उपयोग करके है $ .getScript पृष्ठ लोड के दौरान इसकी आवश्यकता के समय किसी भी स्क्रिप्ट फ़ाइल को लोड करने के लिए.

$ .getScript ("स्क्रिप्ट / गैलरी.js", कॉलबैक); 

यह एक अजाक्स फ़ंक्शन है जिसे आप चाहते हैं कि जब एक एकल स्क्रिप्ट फ़ाइल मिल जाएगी, लेकिन ध्यान दें कि फ़ाइल को लाया गया कैश नहीं है। के लिए कैशिंग को सक्षम करने के लिए getScript आपको सभी ajax अनुरोधों के लिए समान सक्षम करना होगा। आप नीचे दिए गए कोड का उपयोग करके ऐसा कर सकते हैं:

$ .ajaxSetup (cache: true); 

2. बचना $ (विंडो) .लोड () यदि आपकी स्क्रिप्ट को पृष्ठ के किसी उप-संसाधन की आवश्यकता नहीं है

$ (दस्तावेज़)। पहले से ही () के बराबर है DOMContentLoaded (कहा पे DOMContentLoaded उपलब्ध है) और $ (विंडो) .लोड () सेवा मेरे भार. पहले एक को निकाल दिया जाता है जब एक पृष्ठ का अपना डोम लोड होता है, लेकिन बाहरी संपत्ति जैसे चित्र और स्टाइलशीट नहीं। दूसरे को निकाल दिया जाता है जब एक पेज सब कुछ से बना होता है, जिसमें अपनी सामग्री और इसके उप-संसाधन शामिल होते हैं.

इसलिए, यदि आप एक स्क्रिप्ट लिख रहे हैं जो पृष्ठ के उप-संसाधनों पर निर्भर है, जैसे कि पृष्ठभूमि का रंग बदलना div यह एक बाहरी स्टाइलशीट द्वारा स्टाइल किया गया है, यह उपयोग करने के लिए सबसे अच्छा है $ (विंडो) .लोड ().

लेकिन, अगर ऐसा नहीं है, तो बेहतर होगा कि आप इससे चिपके रहें $ (दस्तावेज़)। पहले से ही () क्योंकि, jQuery इसके कॉल करता है तैयार ईवेंट हैंडलर चाहे आप उपयोग करें $ (दस्तावेज़)। पहले से ही () या नहीं, इसलिए जब आप कर सकते हैं तो इसका उपयोग करें.

3. उपयोग अलग करना DOM से ऐसे तत्वों को हटाने के लिए जिन्हें बदलने की आवश्यकता है.

“रीफ़्लो” वह शब्द है जो किसी वेबपेज में लेआउट परिवर्तनों को संदर्भित करता है, यह तब होता है जब ब्राउज़र किसी नए तत्व को समायोजित करने के लिए किसी पृष्ठ के तत्वों को फिर से व्यवस्थित करता है, एक तत्व के संरचनात्मक परिवर्तनों को समायोजित करता है, निकाले गए तत्व द्वारा छोड़े गए अंतर को भरता है, या कुछ अन्य कार्रवाई की आवश्यकता होती है, जो पृष्ठ में लेआउट परिवर्तन. reflow एक है महंगा ब्राउज़र प्रक्रिया.

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

jQuery के अलग () हमें पृष्ठ से एक तत्व निकालने देता है, इससे अलग है हटाना() क्योंकि यह तत्व से जुड़े डेटा को तब सहेजेगा जब इसे बाद में पृष्ठ में जोड़ने की आवश्यकता होगी। अलग किए गए तत्व को तब पृष्ठ में वापस रखा जा सकता है जब इसे संशोधित किया गया हो.

4. उपयोग करें सीएसएस () के बजाय ऊंचाई या चौड़ाई निर्धारित करने के लिए ऊंचाई() तथा चौड़ाई()

यदि आप jQuery में किसी तत्व की ऊंचाई या चौड़ाई निर्धारित कर रहे हैं, तो मेरा सुझाव है कि आप उपयोग करें सीएसएस () फ़ंक्शन का उपयोग करते हुए उन मानों को सेट करने के कारण ऊंचाई() तथा चौड़ाई() फ़ंक्शन में कुछ लेआउट गुणों के एक्सेस के कारण अतिरिक्त रिफ्लोज़ होंगे computeStyleTests jQuery में (नवीनतम संस्करण में परीक्षण किया गया।).

कोड के लिए p.height ( "300px"); यहाँ प्रतिशोध हैं.

के लिये p.css ("ऊँचाई": "300px");

computeStyleTests कुछ समर्थन परीक्षण करने के लिए उपयोग किया जाता है। जबकि यह भी कहा जाता है मिल रहा ऊंचाई और चौड़ाई का उपयोग कर दोनों सीएसएस () तथा लम्बाई चौड़ाई() , लेकिन के लिए सेटिंग यह केवल के लिए कहा जाता है लम्बाई चौड़ाई() जिसकी आवश्यकता नहीं हो सकती है, इसलिए उपयोग करें सीएसएस () बजाय.

5. अनावश्यक रूप से लेआउट गुणों का उपयोग न करें

पेज, ऊंचाई, चौड़ाई, मार्जिन आदि जैसे लेआउट गुणों तक पहुँचने से पृष्ठ में रिफ्लो ट्रिगर होगा। जब भी आप किसी भी लेआउट गुणों के लिए ब्राउज़र से पूछते हैं, तो इसका कारण यह है सुनिश्चित करें कि आपको अपडेटेड वैल्यू मिले (यदि मूल्य पहले अमान्य हो गया हो) मूल्यों की पुनर्गणना और किसी भी लेआउट परिवर्तन को लागू करना.

तो चाहे आप jQuery या वेनिला जावास्क्रिप्ट का उपयोग कर रहे हों, अनावश्यक रूप से लेआउट गुणों तक पहुंचने से सावधान रहें विशेष रूप से एक पाश में या परिणामस्वरूप शैली में परिवर्तन करने के बाद.

6. जहाँ आप कर सकते हैं कैशिंग का उपयोग करें

JQuery के कुछ कार्य कैशिंग तंत्र के साथ आते हैं जिन्हें अच्छे उपयोग के लिए रखा जा सकता है। अजाक्स अनुरोध संसाधनों को कैश करते हैं, लेकिन यह उपलब्ध नहीं है लिपि तथा jsonp, इसलिए यदि आप अपने सभी ajax अनुरोधों पर कैशिंग चाहते हैं, तो आप करना चाहते हैं इसे विश्व स्तर पर स्थापित करें नीचे की तरह.

यह भी ध्यान दें कि यदि आप संसाधनों का उपयोग कर रहे हैं पद यदि आप उपरोक्त सेटअप के साथ कैशिंग सक्षम करते हैं तो भी इसे कैश नहीं किया जाएगा.

जैसा मैंने पहले बताया, अलग () इसके विपरीत हटाए जाने वाले तत्व के साथ जुड़े डेटा को कैश करता है हटाना();छिपाना() प्रारंभिक CSS को कैश करता है प्रदर्शन एक तत्व का मूल्य इसे छिपाने से पहले ताकि इसे बाद में डेटा खोए बिना बहाल किया जा सके.

निष्कर्ष

एक तरह से आप यह सुनिश्चित कर सकते हैं कि आप अपनी आवश्यकता के लिए सबसे प्रभावी jQuery कोड का उपयोग कर रहे हैं, तब तक प्रतीक्षा करें जब तक कि आप वास्तव में अपना कोड न चला लें और ध्यान दें कि कोई प्रदर्शन समस्या है या नहीं। यदि वहाँ है, तो प्रदर्शन और डीबगर उपकरण का उपयोग करें मुद्दे की जड़ का पता लगाएं.

चूँकि jQuery ब्राउज़र कॉम्पिटिशन और सुविधाओं के लिए अतिरिक्त कार्यक्षमता वाले जावास्क्रिप्ट के लिए एक कोकून की तरह है, इसलिए इन उपकरणों के साथ समस्याओं का निदान करना मुश्किल हो सकता है.