अड़चनों को दूर करने के लिए अपने जावास्क्रिप्ट को ट्वीव करके अपने वेब पेजों को गति देना सीखें।
जावास्क्रिप्ट वेब विकास के लिए महत्वपूर्ण है। वेबसाइटों पर आप जो अधिकांश अन्तरक्रियाशीलता और एनीमेशन देखेंगे, उसके पीछे भाषा है। लेकिन अगर कोड खराब तरीके से लिखा गया है तो जावास्क्रिप्ट वेबसाइट को धीमा भी कर सकता है। अक्षमताओं के परिणामस्वरूप खराब लोडिंग समय और धीमी रेंडरिंग गति दोनों हो सकती हैं।
अपनी वेबसाइट की गति और प्रदर्शन को बेहतर बनाने के लिए निम्नलिखित अभ्यासों को अपनाएं।
1. चर को स्थानीय रूप से परिभाषित करें
एक प्रोग्रामर के रूप में, आपको पता होना चाहिए स्कोपिंग कैसे काम करता है. जावास्क्रिप्ट में दो प्रकार के चर होते हैं: स्थानीय चर और वैश्विक चर।
स्थानीय चर एक फ़ंक्शन ब्लॉक के भीतर घोषित चर हैं। दायरा केवल उस कार्य के भीतर रहता है जिसमें उन्हें घोषित किया जाता है। वैश्विक चर वे चर होते हैं जिन्हें पूरी स्क्रिप्ट में एक्सेस किया जा सकता है। वैश्विक चर के मामले में, पूरे कार्यक्रम में गुंजाइश बनी रहती है।
जब भी आप किसी वेरिएबल को एक्सेस करने की कोशिश करते हैं, तो ब्राउज़र कुछ ऐसा करता है जिसे स्कोप लुकअप के रूप में जाना जाता है। यह चर के निकटतम दायरे की जाँच करता है और तब तक देखता रहता है जब तक कि यह चर नहीं मिल जाता। इस प्रकार, आपके कार्यक्रम में जितनी अधिक गुंजाइश श्रृंखला होगी, वर्तमान दायरे से परे चरों तक पहुँचने में उतना ही अधिक समय लगेगा।
इस कारण से, अपने वेरिएबल्स को हमेशा निष्पादन संदर्भ के करीब परिभाषित करना सबसे अच्छा है। दुर्लभ अवसरों पर ही वैश्विक चरों का उपयोग करें; जब आप संपूर्ण स्क्रिप्ट में उपयोग किए गए डेटा को संग्रहीत करना चाहते हैं, उदाहरण के लिए। इससे आपके कार्यक्रम में कार्यक्षेत्रों की संख्या कम हो जाएगी, जिससे प्रदर्शन में सुधार होगा।
2. जावास्क्रिप्ट को अतुल्यकालिक रूप से लोड करें
जावास्क्रिप्ट एक एकल-थ्रेडेड प्रोग्रामिंग भाषा है। इसका मतलब यह है कि एक बार एक फ़ंक्शन निष्पादित होने के बाद, इसे किसी अन्य फ़ंक्शन के चलने से पहले अंत तक चलाना पड़ता है। यह आर्किटेक्चर उन स्थितियों को जन्म दे सकता है जिनमें कोड थ्रेड को ब्लॉक कर सकता है और ऐप को फ्रीज कर सकता है।
थ्रेड को अच्छा प्रदर्शन करने के लिए, आपको कुछ समय बर्बाद करने वाले कार्यों को एसिंक्रोनस रूप से चलाना चाहिए। जब कोई कार्य अतुल्यकालिक रूप से चलता है, तो यह थ्रेड की सभी प्रोसेसिंग पावर नहीं लेता है। इसके बजाय, फ़ंक्शन एक ईवेंट कतार में शामिल हो जाता है जहां इसे अन्य सभी कोडों के निष्पादन के बाद निकाल दिया जाता है।
एपीआई कॉल अतुल्यकालिक पैटर्न के लिए एकदम सही हैं क्योंकि उन्हें हल करने में समय लगता है। इसलिए इसे थ्रेड को होल्ड करने के बजाय, आप डेटा को एसिंक्रोनस रूप से लाने के लिए फ़ेच एपीआई जैसी प्रॉमिस-आधारित लाइब्रेरी का उपयोग करेंगे। इस तरह, ब्राउज़र एपीआई से डेटा पुनर्प्राप्त करते समय अन्य कोड चला सकता है।
अतुल्यकालिक प्रोग्रामिंग की पेचीदगियों को समझें और आप अपने एप्लिकेशन के प्रदर्शन में सुधार करेंगे।
3. अनावश्यक लूप से बचें
जावास्क्रिप्ट में लूप का उपयोग करना महंगा हो सकता है अगर आप सावधान नहीं हैं। वस्तुओं के संग्रह के माध्यम से साइकिल चलाने से ब्राउज़र पर बहुत अधिक दबाव पड़ सकता है।
जबकि आप निश्चित रूप से अपने कोड में लूप से बच नहीं सकते हैं, आपको उनमें जितना संभव हो उतना कम काम करने की आवश्यकता है। आप अन्य तकनीकों का उपयोग कर सकते हैं जो संग्रह के माध्यम से लूप करने की आवश्यकता से बचती हैं।
उदाहरण के लिए, आप किसी सरणी की लंबाई को लूप के प्रत्येक पुनरावृत्ति के दौरान पढ़ने के बजाय एक भिन्न चर में संग्रहीत कर सकते हैं। यदि आप एक पाश से जो चाहते हैं वह प्राप्त करते हैं, तो इसे तुरंत तोड़ दें।
4. जावास्क्रिप्ट कोड को छोटा करें
जावास्क्रिप्ट कोड को अनुकूलित करने के लिए मिनिफिकेशन एक प्रभावी तरीका है। एक मिनिमाइज़र आपके कच्चे स्रोत कोड को एक छोटी उत्पादन फ़ाइल में बदल देता है। वे टिप्पणियों को हटाते हैं, अनावश्यक सिंटैक्स को ट्रिम करते हैं, और लंबे वेरिएबल नामों को छोटा करते हैं। वे अप्रयुक्त कोड को भी हटाते हैं और कम लाइन लेने के लिए मौजूदा कार्यों का अनुकूलन करते हैं।
मिनिमाइज़र के उदाहरण Google क्लोजर कंपाइलर, UglifyJS और Microsoft AJAX मिनिफ़ायर हैं। आप अपने कोड का निरीक्षण करके और इसे अनुकूलित करने के तरीकों की तलाश करके इसे मैन्युअल रूप से कम कर सकते हैं। उदाहरण के लिए, आप कर सकते हैं अपने कोड में if कथनों को सरल बनाएं.
5. बड़ी फ़ाइलों को Gzip से कंप्रेस करें
अधिकांश ग्राहक कंप्रेस और डीकंप्रेस करने के लिए Gzip का उपयोग करें बड़ी जावास्क्रिप्ट फ़ाइलें। जब कोई ब्राउज़र संसाधन का अनुरोध करता है, तो सर्वर प्रतिक्रिया में एक छोटी फ़ाइल वापस करने के लिए इसे संपीड़ित कर सकता है। जब क्लाइंट फ़ाइल प्राप्त करता है, तो वह इसे डीकंप्रेस करता है। कुल मिलाकर, यह दृष्टिकोण बैंडविड्थ बचाता है और विलंबता को कम करता है, जिससे एप्लिकेशन प्रदर्शन में सुधार होता है।
6. DOM एक्सेस को छोटा करें
DOM तक पहुँचने से आपके एप्लिकेशन के प्रदर्शन पर असर पड़ सकता है क्योंकि ब्राउज़र को हर DOM अपडेट के साथ रिफ्रेश करना पड़ता है। DOM एक्सेस को कम से कम संभव फ़्रीक्वेंसी तक सीमित करना सबसे अच्छा है। ऐसा करने का एक तरीका ब्राउज़र ऑब्जेक्ट्स के संदर्भों को संग्रहित करना है।
आप रिएक्ट जैसी लाइब्रेरी का भी उपयोग कर सकते हैं जो वास्तविक डोम पर धकेलने से पहले वर्चुअल डोम में बदलाव करती है। नतीजतन, ब्राउज़र पूरे पृष्ठ को रीफ्रेश करने के बजाय एप्लिकेशन के उन हिस्सों को अपडेट करता है जिन्हें अपडेट करने की आवश्यकता होती है।
7. जावास्क्रिप्ट के अनावश्यक लोड को टालें
हालांकि यह आवश्यक है कि आपका पृष्ठ समय पर लोड हो, यह आवश्यक नहीं है कि सभी फ़ंक्शन आरंभिक लोड पर कार्य कर रहे हों. मान लें कि आपके पास एक क्लिक करने योग्य बटन और एक टैब मेनू है जो जावास्क्रिप्ट कोड को संदर्भित करता है; पेज लोड होने के बाद तक आप दोनों को टाल सकते हैं।
यह विधि प्रसंस्करण शक्ति को मुक्त करती है, जिससे आप आवश्यक पृष्ठ तत्वों को समय पर प्रस्तुत कर सकते हैं। आप संकलन कोड में देरी करते हैं जो पृष्ठ के प्रारंभिक प्रदर्शन को रोक सकता है। फिर, जब पृष्ठ लोड होना समाप्त हो जाता है, तो आप कार्यात्मकताओं को लोड करना प्रारंभ कर सकते हैं। इस तरह, उपयोगकर्ता तेज़ लोड समय का आनंद ले सकता है और समय पर तत्वों के साथ इंटरैक्ट करना शुरू कर सकता है।
आप अपने हेड एलिमेंट में सीएसएस और जावास्क्रिप्ट की सबसे छोटी मात्रा भी शामिल कर सकते हैं, ताकि यह तुरंत लोड हो जाए। द्वितीयक कोड तब अलग-अलग .css और .js फ़ाइलों में रह सकता है। इस तकनीक के बारे में अच्छे ज्ञान की आवश्यकता है डोम कैसे काम करता है.
8. जावास्क्रिप्ट लोड करने के लिए सीडीएन का प्रयोग करें
सामग्री वितरण नेटवर्क का उपयोग करने से पृष्ठ लोड समय में तेजी लाने में मदद मिलती है, लेकिन यह हमेशा प्रभावी नहीं होता है। उदाहरण के लिए, यदि आप किसी विज़िटर के देश में स्थानीय सर्वर के बिना CDN चुनते हैं, तो उन्हें कोई लाभ नहीं होगा।
इस समस्या को हल करने के लिए, आप कई सीडीएन की तुलना करने के लिए टूल का उपयोग कर सकते हैं और यह तय कर सकते हैं कि आपके उपयोग के मामले में सबसे अच्छा प्रदर्शन कौन प्रदान करता है। यह जानने के लिए कि कौन सी सीडीएन आपकी लाइब्रेरी के लिए सबसे अच्छी है, देखें cdnjs वेबसाइट।
9. मेमोरी लीक को दूर करें
मेमोरी लीक किसी एप्लिकेशन के प्रदर्शन पर नकारात्मक प्रभाव डाल सकता है। लीक तब होता है जब लोड किया गया पृष्ठ अधिक से अधिक मेमोरी लेता है।
मेमोरी लीक का एक उदाहरण तब होता है जब आपका ब्राउज़र एप्लिकेशन के साथ काम करने के लंबे सत्र के बाद धीमा होना शुरू हो जाता है।
आप अपने एप्लिकेशन में मेमोरी लीक का पता लगाने के लिए क्रोम डेवलपर टूल्स का उपयोग कर सकते हैं। उपकरण प्रदर्शन टैब में समयरेखा रिकॉर्ड करता है। DOM तत्वों को हटाने के परिणामस्वरूप कई मेमोरी लीक होती हैं। कचरा संग्रहकर्ता केवल तभी मेमोरी जारी करेगा जब इन तत्वों को संदर्भित करने वाले सभी चर दायरे से बाहर हों।
Lighthouse, Google PageSpeed Insights, और Chrome जैसे टूल समस्याओं का पता लगाने में आपकी मदद कर सकते हैं. लाइटहाउस पहुंच, प्रदर्शन और एसईओ मुद्दों की जांच करता है। Google पेजस्पीड आपके एप्लिकेशन के प्रदर्शन को बढ़ाने के लिए जावास्क्रिप्ट को अनुकूलित करने में आपकी सहायता कर सकता है।
क्रोम ब्राउज़र एक डेवलपर टूल सुविधा प्रदान करता है जिसे आप अपने कीवर्ड पर F12 क्लिक करके टॉगल कर सकते हैं। आप नेटवर्क को चालू और बंद करने और CPU खपत की जांच करने के लिए इसके प्रदर्शन विश्लेषण का उपयोग कर सकते हैं। यह आपकी वेबसाइट को प्रभावित करने वाली समस्याओं को उजागर करने के लिए अन्य मेट्रिक्स की भी जाँच करता है।
एक वेब डेवलपर के रूप में, आप अपने वेब ब्राउज़र में बहुत काम करने वाले हैं। वेबसाइट की समस्याओं के निवारण में आपकी मदद करने के लिए अधिकांश ब्राउज़र डेवलपर टूल के सूट के साथ आते हैं। Google Chrome की डेवलपर टूल सुविधा में आपकी सहायता के लिए कई कार्य हैं।
