फ्रंट-एंड वेब एप्लिकेशन के प्रदर्शन में सुधार कैसे करें: पांच टिप्स

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

Alconost में अनुवादित

प्रस्तावना

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

वास्तविक समस्या यह थी कि प्रोग्रामर अनुचित स्थानों पर और अनुचित समय पर दक्षता के बारे में चिंता करने में बहुत समय बिताते थे। समयपूर्व अनुकूलन सभी प्रोग्रामिंग गलतियों (या कम से कम सबसे) की जड़ है ।

1. खोज: सामान्य सरणियों के बजाय - वस्तुएं और साहचर्य सरणियाँ

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

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

आप यहां प्रदर्शन का परीक्षण कर सकते हैं: https://jsperf.com/finding-element-object-vs-map-vs-array/1 । नीचे मेरे परिणाम हैं:



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

2. अपवादों के बजाय - सशर्त ऑपरेटर "यदि"

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

टेस्ट: https://jsperf.com/try-catch-vs-conditions/1 । नीचे मेरे परिणाम हैं:



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

3. कम चक्र, बेहतर

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

"फ़िल्टर" और "मैप" के लिए प्रदर्शन परीक्षण: https://jsperf.com/array-function-chains-vs-single-loop-filter-map/1 । मेरे परिणाम:



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

अब "फ़िल्टर" + "कम करें" देखें: https://jsperf.com/array-function-chains-vs-single-loop-filter-reduce/1 । मेरे परिणाम:



यहां अंतर पहले से ही अधिक है: एक में दो कार्यों के संयोजन ने निष्पादन को लगभग आधा कर दिया। फिर भी, पारंपरिक "चक्र" के लिए संक्रमण गति में बहुत अधिक वृद्धि देता है।

4. छोरों के लिए नियमित रूप से उपयोग करें

यह सलाह विवादास्पद भी लग सकती है, क्योंकि डेवलपर्स को कार्यात्मक चक्र पसंद हैं: वे अच्छी तरह से पढ़े जाते हैं और काम को सरल बना सकते हैं। हालांकि, वे पारंपरिक चक्रों की तुलना में कम प्रभावी हैं। मुझे लगता है कि आप पहले से ही लूप के उपयोग में अंतर देख सकते हैं, लेकिन आइए इसे एक अलग परीक्षा में देखें: https://jsperf.com/for-loops-in-few-different-ways/ । जैसा कि आप देख सकते हैं, अंतर्निर्मित तंत्र के अलावा, मैंने "लोएश" लाइब्रेरी से "फॉरएच" और "प्रत्येक" को "jQuery" से भी चेक किया। परिणाम:



और फिर हम देखते हैं कि लूप के लिए सबसे सरल "बाकी" की तुलना में बहुत तेज है। सच है, ये लूप केवल सरणियों के लिए अच्छे हैं - अन्य पुनरावृत्त वस्तुओं के मामले में, आपको "forEach", "for ..." या स्वयं itter का उपयोग करना चाहिए। लेकिन "के लिए ..." केवल तभी लागू किया जाना चाहिए जब कोई अन्य विधियाँ न हों। यह भी याद रखें कि "के लिए ..." वस्तु के सभी गुणों को स्वीकार करता है (और सरणी में गुण अनुक्रमित होते हैं), जिससे अप्रत्याशित परिणाम हो सकते हैं। हैरानी की बात यह है कि प्रदर्शन के लिहाज से लोदाश और jQuery के तरीके इतने बुरे नहीं थे, इसलिए कुछ मामलों में आप बिल्ट-इन “forEach” के बजाय सुरक्षित रूप से उनका उपयोग कर सकते हैं (यह दिलचस्प है कि परीक्षण में लॉडश के लूप ने अंतर्निहित की तुलना में काम किया है)।

5. DOM के साथ काम करने के लिए अंतर्निहित कार्यों का उपयोग करें

कभी-कभी आप किसी और के कोड को देखते हैं और देखते हैं कि डेवलपर ने केवल डोम के हेरफेर के लिए jQuery आयात किया है - मुझे यकीन है कि आपने इसे भी देखा है, क्योंकि यह सबसे लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में से एक है। यह स्पष्ट है कि DOM को नियंत्रित करने के लिए पुस्तकालयों का उपयोग करने में कुछ भी गलत नहीं है: आज हम React और Angular का उपयोग करते हैं, और वे ऐसा ही करते हैं। हालाँकि, कभी-कभी ऐसा लगता है कि डोम से किसी तत्व को निकालने और उसमें मामूली बदलाव करने के लिए भी jQuery का उपयोग सरल संचालन के लिए किया जाना चाहिए।

यहां तीन अलग-अलग मामलों में DOM और इसी तरह के JQuery ऑपरेशंस के लिए बिल्ट-इन फ़ंक्शन की तुलना की गई है: https://jsperf.com/native-dom-functions-vs-jquery/1 । मेरे परिणाम:



और फिर, सबसे बुनियादी कार्य - "getElementById" और "getElementsByClassName" - DOM देखने के दौरान सबसे तेज़ निकला। पहचानकर्ताओं और उन्नत चयनकर्ताओं के मामले में, क्वेरीसेलेक्टर भी jQuery की तुलना में तेज है। और केवल एक मामले में jQuery की तुलना में "querySelectorAll" धीमी है (वर्ग नाम से तत्व प्राप्त करना)। JQuery को कैसे और कैसे बदलना है, इसकी अधिक जानकारी के लिए, यहां देखें: http://youmightnotneedjquery.com

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

अतिरिक्त सामग्री

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

1. वेबपैक का उपयोग करके जावास्क्रिप्ट बंडलों का अनुकूलन: यह एक बहुत व्यापक विषय है, लेकिन अगर सब कुछ सही ढंग से किया जाता है, तो लोडिंग अनुप्रयोगों में काफी तेजी आ सकती है।

2. डेटा संरचनाएं, बुनियादी एल्गोरिदम और उनकी जटिलता: कई मानते हैं कि यह "सिर्फ एक सिद्धांत" है, लेकिन पहले पैराग्राफ में हमने देखा कि यह सिद्धांत व्यवहार में कैसे काम करता है।

3. jsPerf पृष्ठ पर टेस्ट: यहां आप जावास्क्रिप्ट में एक ही कार्य को पूरा करने के लिए विभिन्न तरीकों की तुलना के साथ खुद को परिचित कर सकते हैं और साथ ही अभ्यास में एक महत्वपूर्ण संकेतक देख सकते हैं - गति में अंतर।

अनुवादक के बारे में

लेख का अनुवाद अल्कोनोस्ट ने किया था।

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

हम विज्ञापन और प्रशिक्षण वीडियो भी बनाते हैं - Google Play और ऐप स्टोर के लिए बिक्री, छवि, विज्ञापन, प्रशिक्षण, टीज़र, खोजकर्ता, ट्रेलरों के लिए।

→ और पढ़ें