जावास्क्रिप्ट आवेदन प्रदर्शन में सुधार के लिए 12 सुझाव

प्रदर्शन वेब डेवलपर्स या वेब एप्लिकेशन का सामना करने वाले सबसे महत्वपूर्ण मुद्दों में से एक है। कोई भी एक एप्लिकेशन, या एक पेज जो उम्र के लिए लोड हो रहा है, के साथ खुश नहीं होगा, जो अत्यधिक भार से दुर्घटनाग्रस्त हो जाता है। वेबसाइट उपयोगकर्ता अपने डाउनलोड के लिए या अपने पृष्ठों को काम करने की स्थिति में लाने के लिए बहुत लंबा इंतजार करने के लिए तैयार नहीं हैं। अनुसार KISSmetrics , आगंतुकों के 47% कम से कम 2 सेकंड में लोड करने के लिए एक वेबसाइट की उम्मीद है। यदि इसे लोड करने में 3 सेकंड से अधिक समय लगता है, तो 40% आगंतुक साइट छोड़ देंगे।



सामग्री के लेखक, जिसका अनुवाद हम आज प्रकाशित करते हैं, कहते हैं कि, उपरोक्त आंकड़ों को ध्यान में रखते हुए, यह स्पष्ट हो जाता है कि प्रदर्शन कुछ ऐसा है जिसे वेब डेवलपर्स को हमेशा याद रखना चाहिए। जेएस परियोजनाओं के प्रदर्शन में सुधार के लिए यहां 12 युक्तियां दी गई हैं।

1. ब्राउज़र कैशिंग तंत्र का उपयोग करें

ब्राउज़रों का उपयोग करके डेटा को कैश करने के दो मुख्य तरीके हैं। पहला कैशे जावास्क्रिप्ट जावास्क्रिप्ट एपीआई का उपयोग है, जिसे सेवा कार्यकर्ताओं द्वारा नियंत्रित किया जाता है। दूसरा एक नियमित HTTP कैश है।

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

2. उन वातावरणों के लिए कोड का अनुकूलन करें जिनमें यह चलेगा

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

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

3. अप्रयुक्त जेएस कोड से छुटकारा पाएं

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

4. मेमोरी को बचाएं

यह सुनिश्चित करने के लिए प्रयास करने योग्य है कि वेब परियोजनाएं केवल उस मेमोरी का उपयोग करती हैं, जिसके बिना वे बिल्कुल असमर्थ हैं। तथ्य यह है कि एक डेवलपर को पहले से पता नहीं चल सकता है कि एक निश्चित डिवाइस पर उसके एप्लिकेशन द्वारा कितनी मेमोरी एक्सेस की जा सकती है। यदि एप्लिकेशन अनजाने में बड़ी मात्रा में मेमोरी का उपयोग करता है, तो यह ब्राउज़र जेएस इंजन के मेमोरी प्रबंधन तंत्र पर एक बढ़ा हुआ लोड बनाता है। विशेष रूप से, यह कचरा कलेक्टर पर लागू होता है। बार-बार कचरा संग्रह करने वाले कार्यक्रम धीमा हो जाते हैं। यह परियोजना की उपयोगिता को नकारात्मक रूप से प्रभावित करता है।

5. मामूली स्क्रिप्ट के लिए आस्थगित लोडिंग तंत्र का उपयोग करें

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

इस दृष्टिकोण के साथ, आप बहुत शुरुआत में जेएस कोड की एक बड़ी मात्रा को लोड करने और संकलन करने से ब्राउज़र से बच सकते हैं, अर्थात, इन ऑपरेशनों को करने की आवश्यकता के कारण पृष्ठ आउटपुट को धीमा करने से बचें। सभी सबसे महत्वपूर्ण डाउनलोड पूरा होने के बाद, आप अतिरिक्त कोड डाउनलोड करना शुरू कर सकते हैं। परिणामस्वरूप, जब उपयोगकर्ता को इस कोड की आवश्यकता होगी, तो यह पहले से ही उसके पास उपलब्ध होगा। RAIL मॉडल के अनुसार, Google लगभग 50 ms अवधि की आलसी लोडिंग स्क्रिप्ट सत्र चलाने की सलाह देता है। इस दृष्टिकोण के साथ, कोड लोड करने का संचालन पृष्ठ के साथ उपयोगकर्ता की बातचीत को प्रभावित नहीं करेगा।

6. मेमोरी लीक से बचें

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

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

7. यदि आपको कुछ भारी कंप्यूटिंग करने की आवश्यकता है, तो वेब कर्मचारियों का उपयोग करें

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

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

8. यदि आप कई बार DOM एलिमेंट एक्सेस करते हैं, तो किसी वैरिएबल में लिंक को सेव करें

DOM तत्व का संदर्भ प्राप्त करना एक धीमा ऑपरेशन है। यदि आप किसी तत्व को कई बार एक्सेस करने जा रहे हैं, तो स्थानीय वैरिएबल में लिंक को सेव करना सबसे अच्छा है। लेकिन यहां यह याद रखना महत्वपूर्ण है कि यदि तत्व, जिस लिंक को चर में संग्रहीत किया गया है, उसे बाद में DOM से हटा दिया जाता है, तो आपको चर से लिंक को हटाने की आवश्यकता है। उदाहरण के लिए, आप इसे एक चर के लिए null लिखकर कर सकते हैं। यह मेमोरी लीक से बच जाएगा।

9. चर को उसी दायरे में घोषित करने का प्रयास करें जिसमें उनका उपयोग किया जाएगा।

जावास्क्रिप्ट, जब एक चर का उपयोग करने की कोशिश कर रहा है, तो पहले इसे स्थानीय दायरे में देखें। यदि यह वहां दिखाई नहीं देता है, तो खोज उस दायरे में जारी रहती है, जिसमें स्थानीय गुंजाइश अंतर्निहित है। यह तब तक होता है जब तक वैश्विक चर की जाँच नहीं हो जाती। स्थानीय स्कोपों ​​में चर को बचाने से उन तक पहुंच बढ़ जाती है।

विशेष आवश्यकता के बिना, चर घोषित करते समय var कीवर्ड का उपयोग न करने का प्रयास करें। इसके बजाय, चर और स्थिरांक घोषित करने के लिए let और const कीवर्ड का उपयोग करें। वे ब्लॉक स्कोप और कुछ अन्य उपयोगी विशेषताओं में भिन्न हैं। फ़ंक्शन में चर के उपयोग पर ध्यान दें, यह सुनिश्चित करने की कोशिश कर रहा है कि फ़ंक्शन के अंदर आप जिन चर तक पहुंचते हैं, वे इसके लिए स्थानीय हैं। उन परेशानियों से अवगत रहें जो वैश्विक चरों की घोषणा का कारण बन सकती हैं।

10. कोशिश करें कि वैश्विक चर का उपयोग न करें

वैश्विक चर पूरे समय में स्क्रिप्ट के चलने के दौरान मौजूद रहते हैं। जब स्थानीय दायरा नष्ट हो जाता है तो स्थानीय चर नष्ट हो जाते हैं। इसलिए, वैश्विक चर का उपयोग केवल तभी किया जाना चाहिए जब यह वास्तव में आवश्यक हो।

11. जावास्क्रिप्ट कोड अनुकूलन में लागू करें जो आप अन्य भाषाओं में लिखे गए कार्यक्रमों पर लागू करेंगे

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

12. एप्लिकेशन प्रदर्शन अनुसंधान टूल का उपयोग करें

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

लाइटहाउस और पेजस्पीड दोनों ही सही उपकरण नहीं हैं, लेकिन उनका उपयोग उन समस्याओं को देखने में मदद करता है, जो पहली नज़र में अदृश्य हो सकती हैं।

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


Chrome डेवलपर टूल में प्रदर्शन टैब

Chrome का उपयोग करते हुए पृष्ठ प्रदर्शन की जानकारी के संग्रह के दौरान, आप प्रोसेसर और नेटवर्क संसाधनों को पृष्ठों पर उपलब्ध कॉन्फ़िगर कर सकते हैं, जो आपको समस्याओं को पहचानने और ठीक करने की अनुमति देता है।


Chrome पृष्ठ प्रदर्शन विश्लेषण

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

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

परिणाम

कोड अनुकूलन और पठनीयता के बीच संतुलन बनाए रखना महत्वपूर्ण है। कोड की व्याख्या कंप्यूटर द्वारा की जाती है, लेकिन लोगों को इसका समर्थन करना होगा। इसलिए, कोड को न केवल कंप्यूटर के लिए, बल्कि मनुष्यों के लिए भी समझा जाना चाहिए।

इसके अलावा, यह याद रखना उपयोगी है कि प्रदर्शन को हमेशा ध्यान में रखा जाना चाहिए, लेकिन यह कोड के त्रुटि-मुक्त संचालन को सुनिश्चित करने और उन अनुप्रयोगों की क्षमताओं को लागू करने से अधिक महत्वपूर्ण नहीं होना चाहिए जो उपयोगकर्ताओं को चाहिए।

प्रिय पाठकों! आप अपनी जेएस परियोजनाओं को कैसे अनुकूलित करते हैं?