🕌 📀 🕺🏽 जावास्क्रिप्ट प्रदर्शन सर्वश्रेष्ठ अभ्यास 👔 🧙🏾 🥖

मुझे ट्विटर पर एक दिलचस्प दस्तावेज़ मिला।

जावास्क्रिप्ट प्रदर्शन सर्वश्रेष्ठ अभ्यास

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

एक बार फिर मैं ध्यान देता हूं - इन टिप्पणियों को "सभी ब्राउज़रों के लिए सार्वभौमिक प्रोग्रामिंग" के प्रकाश में माना जाना चाहिए। यह संभव है कि सिम्बियन के लिए विकास के संदर्भ में, लेख बेहद सच है

टिप्पणियों में अपनी टिप्पणियों का सुझाव दें - शायद अंत में यह अनुकूलन के बारे में एक उत्कृष्ट लेख का परिणाम देगा
मैं खुद विकी पर इस लेख को संपादित करूंगा, लेकिन "आपके पास इस पृष्ठ को देखने या इस क्रिया को करने के लिए पर्याप्त विशेषाधिकार नहीं हैं।"

के साथ शुरू करने के लिए, लेख कई उपयोगी सुझावों का खुलासा करता है।
उदाहरण के लिए, eval का उपयोग करना सबसे अच्छा है, और जब किसी तत्व को प्राप्त करना और उसका आकार बदलना हो , तो अत्यधिक रिफ्लो (तत्वों के आयाम या स्थान का निर्धारण करने वाले संचालन का उपयोग कम से कम) दिखाई दे सकता है ।

ट्रैवर्स करते समय संशोधनों से बचें

और कंटेनर जो रिटर्न प्राप्त करता है, बाइट्सटैगनाम वास्तव में "लाइव" है और निम्न कोड आपके ब्राउज़र को लटका देगा:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <div id="container"><em></em><em></em></div> </body> <script>/* Script here */</script> </html>

 var doc = document, ems = doc.getElementsByTagName('em'), cont = doc.getElementById('container'); for (var i = 0; i < ems.length; i++) { cont.appendChild(doc.createElement('em')); };

हालांकि, कई नुकसान हैं।

सबसे पहले, गलतियों। उदाहरण:

Eval या फंक्शन कन्स्ट्रक्टर के उपयोग से बचें

 addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; }); // => addMethod(myObj, 'methodName', function () { this.localVar=foo; });

तेजी से स्टार्टअप के लिए ब्लॉक किए बिना स्क्रिप्ट लोड करें और स्प्लैश स्क्रीन दिखाएं

script.onreadstatechange => script.onread y statechange

और त्रुटियां वाक्यगत योजना की नहीं हैं, बल्कि तार्किक की हैं:

 var elem = document.getElementById('elem').propertyOne = 'value of first property'; elem.propertyTwo = 'value of second property'; elem.propertyThree = 'value of third property' //  , .. [elem]    'value of first property',   dom- document.getElementById('elem').propertyOne = 'value of first property'; document.getElementById('elem').propertyTwo = 'value of second property'; document.getElementById('elem').propertyThree = 'value of third property';

दूसरे, हालांकि कुछ युक्तियां वास्तव में आपके आवेदन को गति देंगी, क्योंकि उन्हें इससे कोई मतलब नहीं है पूरी तरह से अलग कार्यक्रम तर्क है।
सीधे शब्दों में कहें, "ए" के बजाय "बी" बनाएं क्योंकि "बी" तेज है।

उदाहरण -

प्रदर्शन-महत्वपूर्ण कार्यों के अंदर ट्राइ-कैच-आखिर का उपयोग न करें

कभी-कभी लूप के अंदर अपवादों को संभालना आवश्यक हो सकता है, कभी-कभी बाहर। इन दो ऑपरेशनों का पूरी तरह से अलग आधार और अलग परिणाम हैं।

प्रदर्शन-महत्वपूर्ण कार्यों में से बचें

फिर से - एक अलग परिणाम। var i in arr सरणियों के लिए var i in arr अत्यंत दुर्लभ स्थितियों में लागू होती है। एक सरणी पर सबसे सही पुनरावृत्ति (चौखटे में प्रयुक्त):

 for (var i = 0, len = arr.length; i < len; i++) if (i in arr) { // action }

यह सरणी को सही ढंग से पीछे ले जाएगा, जो पूरी तरह से भरा नहीं है और नवीनतम विनिर्देशों से forach विधि के व्यवहार से मेल खाती है:

 var arr = ['zero','one','two']; arr[10] = 'ten'; arr.forEach(function (elem) { console.log(elem); //  "zero, one, two, ten"   undefined  "two"  "ten" });

यदि आप ऐरे की सामग्री को जानते हैं और इससे कोई फर्क नहीं पड़ता है कि इसके चारों ओर किस क्रम में जाना है, तो आप रिवर्स लूप का उपयोग कर सकते हैं

 function sum (arr) { var result = 0; for (var i = arr.length; i--;) { result += arr[i]; } return result; };

मेरे लंबे समय तक चलने वाले परीक्षणों से पता चला कि यह न केवल अच्छी तरह से पढ़ा जाता है, बल्कि एक सीधे पास से भी तेज है।

स्क्रिप्ट टिप्पणियों को कम से कम रखने की कोशिश करें / लंबे चर नामों से बचें

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

स्थानीय संदर्भों को आउट-ऑफ़-स्कोप वैरिएबल में संग्रहीत करें

कैशिंग दस्तावेज़ समझ में आता है, लेकिन उदाहरण खराब है, जो इस मामले में समझ में नहीं आता है, क्योंकि कैश से पढ़ना केवल एक बार होता है।

XML और JSON के विकल्प के रूप में, बड़े डेटासेट के लिए कस्टम डेटा विनिमय प्रारूप का उपयोग करने पर विचार करें

बुरी सलाह। जितना संभव हो अपने स्वयं के डेटा प्रारूपों से बचने की कोशिश करें और लेख इस तरह के आतंक का एक उदाहरण दिखाता है:

 that.contacts = o.responseText.split("\\c"); for (var n = 0, len = that.contacts.length, contactSplit; n < len; n++) { contactSplit = that.contacts[n].split("\\a"); that.contacts[n] = {}; that.contacts[n].n = contactSplit[0]; // ... that.contacts[n].y = contactSplit[8]; }

सबसे पहले, var contacts = JSON.parse(o.responseText); तुलना में लिखने में बहुत अधिक समय var contacts = JSON.parse(o.responseText);
दूसरे, कई ब्राउज़रों में JSON पार्सिंग अंतर्निहित है और एक मौका है कि आपका "तेज" प्रारूप JSON की तुलना में बहुत धीमा काम करेगा। लेकिन शायद तेजी से, टिप्पणियों को देखें ।
तीसरा, समर्थन के दौरान बहुत सारी कमियां हैं: o.responseText की o.responseText सामग्री, आपको सर्वर और क्लाइंट पर एक पार्सर और प्रारूप संकलक लिखना होगा, तृतीय-पक्ष डेवलपर्स सदमे में होंगे, आदि।
मूल विचार यह है कि इस तरह के अनुकूलन शायद ही कभी समझ में आता है। ज्यादातर मामलों में, यह कई कमियों के कारण इसे टालने के लायक है।

सामान्य तौर पर, पढ़ें और सोचें। वहाँ दिलचस्प और उपयोगी सुझाव हैं, लेकिन सब कुछ का विश्लेषण करें और इसे सोच-समझकर उपयोग न करें। हमेशा की तरह)

जावास्क्रिप्ट प्रदर्शन सर्वश्रेष्ठ अभ्यास

जावास्क्रिप्ट प्रदर्शन सर्वश्रेष्ठ अभ्यास

More articles: