अनुकूलित प्रदर्शन के लिए शीर्ष 10 जावास्क्रिप्ट हैक

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

एक अनुकूलित जावास्क्रिप्ट कोड क्या है

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

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

1. जावास्क्रिप्ट कोड और जावास्क्रिप्ट फ़ाइलों को कम करने के साथ जेएस कोड लाइनर बनाओ

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

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

• गूगल क्लोजर कंपाइलर
• UglifyJS
• Microsoft AJAX मिनिफायर

जब आपके पास बड़ी जावास्क्रिप्ट फ़ाइल होती है, तो यह पृष्ठ प्रदर्शन को प्रभावित करती है जैसे पेज लोड करने में समय लगता है और कोड को संपीड़ित या छोटा करते समय गति पर प्रभाव स्मार्ट तरीके से समस्या को हल करेगा।

2. जावास्क्रिप्ट में स्कोप का उपयोग करना अच्छा कदम है

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

init: function(name) { this.name = name; }, do: function(callback) { callback.apply(this); } }); var bob = new Car('Aventador'); bob.do(function() { alert(this.name); // 'Aventador' is alerted because 'this' was rewired }); 

3. ऐरे फिल्टर का उपयोग

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

आइए समझते हैं कि इस उदाहरण के माध्यम से यह कैसे काम करता है।

 schema = schema.filter(function(n) { return n }); Output:  ["hi","ilove javascript", "goodbye"] 

4. मानों को बदलने के लिए फ़ंक्शन स्ट्रिंग बदलें

एक फ़ंक्शन 'String.replace () है जो डेवलपर्स को फ़ंक्शन का उपयोग करके स्ट्रिंग को बदलने में मदद करता है। उदाहरण के लिए;

• स्ट्रिंग को बदलने के लिए, 'स्ट्रिंग' और 'रेगेक्स' का उपयोग करें
• सभी स्ट्रिंग्स को बदलने के लिए, फ़ंक्शन 'replaceAll ()' फ़ंक्शन का उपयोग करें
• यदि आप 'Regex' का उपयोग कर रहे हैं तो अंत में / g का प्रयोग करें

आइए इसे नीचे दिए गए उदाहरण से समझते हैं;

 var string = "login login"; console.log(string.replace("in", "out")); // "logout login" console.log(string.replace(/in/g, "out")); //"logout logout" 

5. ब्रेकपॉइंट और कंसोल का उपयोग करके डिबगिंग

ब्रेकपॉइंट्स और डिबगिंग पॉइंट्स का उपयोग करके, आप कई अवरोधों को सेट करके त्रुटि के आउटसोर्स को फ़िल्टर कर सकते हैं। यहां बताया गया है कि आप यह कैसे कर सकते हैं;

आप F11 का उपयोग करके अगले फ़ंक्शन को कॉल कर सकते हैं और F8 का उपयोग करके स्क्रिप्ट निष्पादन को फिर से शुरू कर सकते हैं।

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

6. जावास्क्रिप्ट लाइब्रेरी से अप्रयुक्त घटकों के साथ दूर रहें

विकास के दौरान, आपको jQuery UI या jQuery मोबाइल जैसे पुस्तकालयों की आवश्यकता हो सकती है, जो घटकों के भार के साथ आते हैं। इसलिए, आपको यह तय करने की आवश्यकता है कि आप किन घटकों को लोड करना चाहते हैं। पुस्तकालयों को डाउनलोड करते समय आप ऐसा कर सकते हैं।

7. HTTP / 2 का उपयोग करने से अंतर आ सकता है

HTTP प्रोटोकॉल के नवीनतम संस्करण का उपयोग करना एक बड़ा अंतर बना सकता है और जावास्क्रिप्ट प्रदर्शन को बढ़ाने में मदद कर सकता है। वर्तमान में, HTTP प्रोटोकॉल अपने नवीनतम संस्करण के रूप में HTTP / 2 का उपयोग करता है और यह मल्टीप्लेक्सिंग का उपयोग करता है जो कई अनुरोधों और प्रतिक्रियाओं को सक्षम करता है जो एक ही समय में काम कर सकते हैं। HTTPS में HTTP / 2 की सभी विशेषताएं हैं और इसलिए, यह एक शानदार विकल्प भी हो सकता है।

8. 'लंबाई' का उपयोग करके एक ऐरे में हटाएं / खाली करें

'लंबाई' का उपयोग करके आप ऐरे में तत्वों को हटाकर और खाली करके फ़ाइल का आकार बदल सकते हैं। आपको निम्न कीवर्ड का उपयोग करने की आवश्यकता है, 'array.length'।

आइए यहां एक उदाहरण देखें;

 array.length = n 

जैसे;

 var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3;</strong> console.log(array.length); // 3 console.log(array); // [1,2,3] 

इसी तरह, यदि आप सरणी खाली करना चाहते हैं, तो आपको उपयोग करने की आवश्यकता है;

 Array.length = 0;. 

यहाँ उदाहरण पर एक नज़र डालें;

 var array = [1, 2, 3, 4, 5, 6]; array.length = 0; console.log(array.length); // 0 console.log(array); // [] 

फ़ाइल को आकार देने और जावास्क्रिप्ट प्रदर्शन को बढ़ाने में तकनीक बहुत उपयोगी है।

9. यदि / Else पर स्विच केस लागू करें

स्विच केस का उपयोग यदि / अन्यथा डेवलपर्स को निष्पादन समय कम करने में सक्षम बनाता है। यदि का उपयोग करना / और परीक्षण को लंबा बनाता है। इसलिए, आपको इसका मूल्यांकन करने की आवश्यकता है।

10. कैशिंग डोम ऑब्जेक्ट

स्क्रिप्ट का उपयोग बार-बार कुछ डोम वस्तुओं तक पहुंचता है। उदाहरण के लिए, ऑब्जेक्ट "document.images" को प्रत्येक लूप के लिए दो बार देखा जाएगा और यदि आपके पास 10 ऐसी छवियां हैं, तो 20 कॉल होंगे। आइए यहां उदाहरण देखें।

 <script type”text/javascript”> for (var i = 0; i &lt;document.images.length; i++) { document.images[i].src=”image.gif”; } <script> 

हालांकि, आप उस विकल्प की तलाश कर सकते हैं जो ब्राउज़र लोडिंग समय को कम करके एप्लिकेशन प्रदर्शन में सुधार करेगा। यहाँ यह कैसे होता है;

 <script type=”text/javascript”> Var domImages = document.images; For (var i=0; i&lt;domImages.length' i++) domImages[i].src = “image.gif”; <script> 

निष्कर्ष

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

इसके अलावा, मैं आपसे सीखना पसंद करूंगा। यदि आप ऐसे किसी भी हैक / एस में आते हैं, तो हमें ईमेल करने में संकोच न करें। आप अपना संदेश और ज्ञान विभिन्न संचार माध्यमों जैसे स्काइप, व्हाट्सएप, या हमसे संपर्क करके भेज सकते हैं।