अनुकूलन या अपने आप को पैर में गोली मारने के लिए कैसे नहीं

सभी को शुभ दिन। आज मैं आपके साथ अनुकूलन के बारे में बात करना चाहता हूं। यह क्या है, इसकी आवश्यकता क्यों है, और सबसे महत्वपूर्ण बात यह है कि यह कैसे सुनिश्चित करें कि यह तब दर्दनाक दर्द न हो।

सबसे पहले, हम यह समझेंगे कि सामान्य रूप से क्या अनुकूलन है, और जेएस में क्या अनुकूलन है। तो, अनुकूलन कुछ मात्रात्मक विशेषता के अनुसार कुछ का सुधार है। JS ने अपने लिए चार मात्रात्मक विशेषताओं की पहचान की:

कोड की मात्रा - यह आमतौर पर स्वीकार किया जाता है कि कोड की कम पंक्तियाँ, अधिक उत्पादक और बेहतर। मेरी राय मौलिक रूप से अलग है, क्योंकि कोड की एक पंक्ति लिखने से आप ऐसी मेमोरी लीक या स्थायी चक्र बना सकते हैं जो ब्राउज़र बस मर जाता है।

गति (प्रदर्शन) तथाकथित कम्प्यूटेशनल जटिलता है, अर्थात्, निर्देश को निष्पादित करने के लिए पार्सर को उन कार्यों की संख्या की आवश्यकता होती है जिन्हें पार्सर को निष्पादित करने की आवश्यकता होती है।

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

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

कोड मात्रा:

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

प्रदर्शन:

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

निर्माण की गति:

• बाहरी निर्भरता की संख्या;
• कोड वार्तालाप। यह विखंडू की संख्या और उनके आकार, सीएसएस रूपांतरण, फ़ाइल ग्लूइंग, ग्राफिक्स अनुकूलन और बहुत कुछ को संदर्भित करता है।

कोड पुन: उपयोग:

• घटकों की संख्या;
• घटकों की पुनरावृत्ति
• लचीलापन और अनुकूलन।

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

बिल्ड टाइम का अनुकूलन अनिवार्य रूप से हमें "कोल्ड" बिल्ड की अवधारणा से परिचित कराता है - यह एक प्रक्रिया है जब कोई परियोजना खरोंच से शुरू होती है और इस बिंदु तक होती है कि सभी निर्भरताएं प्रभावित होती हैं और कोड पूरी तरह से फिर से शुरू होता है। रीबिल्ड के साथ भ्रमित न करें - यह बाहरी निर्भरता और अन्य टिनसेल को खींचे बिना ग्राहक कोड का पुनर्निर्माण कर रहा है।

निर्माण की गति को बढ़ाने में मदद मिलेगी:

• आधुनिक असेंबलरों का उपयोग करना। टेक्नोलॉजीज अभी भी खड़े नहीं हैं, और यदि आपके पास पहला वेबपैक है, तो जब आप चौथे पर जाते हैं, तो आप पहले से ही कुछ भी नहीं कर रहे एक सुखद वृद्धि देखेंगे;
• सभी मृत व्यसनों से छुटकारा। समय-समय पर, डेवलपर्स, सल्फ्यूरिक एसिड के साथ कैन के तल पर सच्चाई को खोजने की कोशिश कर रहे हैं, अपने स्वयं के प्रयोगों को साफ करना भूल जाते हैं। मेरे सहकर्मी ने एक बार पूछा: "निर्भरता जो पैकेज में लिखी गई है। ठीक है, लेकिन कोड में कहीं भी आयातित नहीं है, बंडल में मिलता है। बंडल? ” हां, उन्हें विधानसभा में शामिल नहीं किया जाएगा, लेकिन पैकेज की अवहेलना की जाएगी। सवाल है, क्यों?
• अपनी आवश्यकताओं के आधार पर असेंबली को कई प्रोफाइल में विभाजित करें। न्यूनतम दो: ठेस और देव। बिंदु में मामला: कोड ओफ़्फ़्यूसेशन। ठेस पर, यह अनिवार्य है, कम वजन के बाद से = तेजी से लोड हो रहा है, लेकिन देव स्थगन पर केवल हस्तक्षेप करने और अनावश्यक जोड़तोड़ पर निर्माण समय खर्च करता है;
• व्यक्तिगत विधानसभा चरणों का समानांतरकरण;
• Npm ग्राहकों का उपयोग कर सकते हैं जो कैश कर सकते हैं।

पुनर्निर्माण को गति देने और "ठंडा" निर्माण में अनावश्यक टिप्पणियों और कोड के मृत टुकड़ों को काटने की आवश्यकता होगी। हालांकि, अगर आपके पास एक बड़ी परियोजना है तो क्या करना है और इसका निरीक्षण स्वयं करना संभव नहीं है? ऐसे मामलों में, कोड विश्लेषक बचाव में आते हैं।

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

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

व्यावहारिक रूप से, मुझे कोडेसी , एक मुफ्त और सशुल्क सदस्यता के साथ एक अच्छी सेवा मिली । यह उपयोगी होगा यदि आपको घर पर इस 'हारवेस्टर' को तैनात किए बिना, पक्ष पर कुछ जांचने की आवश्यकता है। इसमें एक सहज ज्ञान युक्त अंतरफलक है, जो कोड के साथ गलत होने का एक विस्तृत संकेत है और बहुत कुछ।

इस लेख में मैं बिल्ड, चंक्स और बाकी की स्थापना के विषय पर नहीं छूऊंगा, क्योंकि यह सब परियोजना और स्थापित बिल्डर की जरूरतों पर निर्भर करता है। शायद मैं इस बारे में अन्य लेखों में बात करूंगा।

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

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

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

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

हम समस्याओं की पहचान करने में सक्षम थे, अब उन्हें हल करने दें!

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

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

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

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

उनके साथ काम करने का तरीका इंटरनेट पर आसानी से पाया जा सकता है।

हम दृष्टिकोण और तीसरे पक्ष के प्रार्थनाओं का पता लगाते हैं, अब मैं कोड के बारे में बात करने का प्रस्ताव करता हूं।

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

दूसरा चरण वैश्विक चरों से छुटकारा पाना है। ईएस 6 ने हमें मानव जाति का एक अद्भुत आविष्कार दिया, जिसे ब्लॉक चर (सरल शब्दों में, वेरिएबल टू वर्जन से लेट और कॉन्स्ट ) घोषित किया।

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

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

1. सरणी की लंबाई की परिभाषा
2. प्रत्येक तत्व की संख्या।
3. प्रत्येक सरणी तत्व की पारी
4. एक सरणी में एक नया आइटम डालें
5. सरणी तत्वों को पुन: अनुक्रमित करना।

परिणाम:

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

1. हम निर्धारित करते हैं कि सब कुछ कितना अच्छा / बुरा है, मैट्रिक्स को हटा दें।
2. हमने अनावश्यक सब कुछ काट दिया: अप्रयुक्त निर्भरताएं, मृत कोड, अनावश्यक टिप्पणियां।
3. हम असेंबली के समय को अनुकूलित और गति देते हैं, विभिन्न प्रोफाइल को कॉन्फ़िगर करते हैं।
4. हम कोड का विश्लेषण करते हैं और तय करते हैं कि हम किन भागों का अनुकूलन करेंगे और फिर से लिखेंगे।
5. हम कार्यक्षमता की हानि को रोकने के लिए परीक्षण लिख रहे हैं।
6. हम रिफैक्टरिंग शुरू करते हैं, वैश्विक चर, मेमोरी लीक, डबिंग कोड और अन्य कचरे से छुटकारा पाते हैं और कोचिंग के बारे में नहीं भूलते हैं।
7. हम गणना की जटिलता को सरल करते हैं और वेब कार्यकर्ता के लिए हर संभव प्रयास करते हैं।

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

और अंत में।

मुझे आप पर विश्वास है, और आप सफल होंगे। क्या आपको लगता है कि मैं भोली हूँ? मुझे लगता है कि आप आश्चर्यचकित होंगे, लेकिन जब से आपको यह लेख मिला, इसे अंत तक पढ़ें, इसका मतलब है (मेरे पास आपके लिए अच्छी खबर है) आपके पास दिमाग है, और आप उन्हें विकसित करने की कोशिश कर रहे हैं। मैं इस तरह के कठिन उपक्रम में सफलता की कामना करता हूं जैसे कि सामने वाले का अनुकूलन करना!