सामान्य जावास्क्रिप्ट गलतियाँ जो प्रदर्शन को बुरी तरह प्रभावित करती हैं? [बन्द है]

Question

हाल ही में यूआई / यूएक्स मीटअप में मैंने भाग लिया था, मैंने एक वेबसाइट पर कुछ प्रतिक्रिया दी थी जिसमें जावास्क्रिप्ट (jQuery) का उपयोग इसकी बातचीत और यूआई के लिए किया गया था - यह काफी सरल एनिमेशन और हेरफेर था, लेकिन एक सभ्य कंप्यूटर पर प्रदर्शन भयानक था।

यह वास्तव में मुझे बहुत सारे साइट / कार्यक्रमों की याद दिलाता है जो मैंने उसी मुद्दे के साथ देखे हैं, जहां कुछ कार्य बिल्कुल प्रदर्शन को नष्ट कर देते हैं। यह ज्यादातर (या कम से कम अधिक ध्यान देने योग्य) स्थितियों में होता है जहां जावास्क्रिप्ट लगभग एक फ्लैश प्रतिस्थापन के रूप में सेवा कर रहा है। यह मेरे द्वारा उपयोग किए गए कुछ वेबएप्स के विपरीत है, जिनमें बहुत अधिक जावास्क्रिप्ट और कार्यक्षमता है, लेकिन बहुत आसानी से चलते हैं (IBM द्वारा COGNOS वह है जो मैं अपने सिर के ऊपर से सोच सकता हूं)।

जेएस को विकसित करने पर विचार करने वाले कुछ सामान्य मुद्दों को जानना मुझे अच्छा लगेगा, जो साइट के प्रदर्शन को मार देंगे।

Comments

हर दूसरे कार्यक्रम के साथ भी ऐसा ही होता है: जरूरत से ज्यादा काम करना और एक ही काम को बार-बार करना, अक्सर सैकड़ों बार।

@delnan यह बहुत सच है, लेकिन ऐसा लगता है कि यह JS में बहुत अधिक प्रचलित है। धारणा हो सकती है?

— निक

जावास्क्रिप्ट के बारे में बात करते समय 'साइट' की बात करने में कुछ हद तक गड़बड़ हो रही है। यह हर जगह है और इन दिनों सब कुछ के लिए इस्तेमाल किया जा रहा है।

— एडम क्रॉसलैंड

@ अदम क्रॉसलैंड आप बिल्कुल सही हैं - उसी उदाहरण में मुझे लगता है कि मैंने एक डेवलपर को एक देशी ऐप के साथ मदद की है जो कि jQuery पर भी निर्भर करता है।

— निक

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

— 15:28 बजे user281377

Answer 1

एक सामान्य प्रदर्शन हत्यारा .lengthएक forलूप के अंदर HTMLCollection पर कॉल कर रहा है :

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

उस विरोधी पैटर्न के कारण लूप के माध्यम से प्रत्येक पास पर संग्रह के आकार की गणना की जाती है। बेहतर तरीका यह है कि लूप के बाहर की लंबाई की गणना करें:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

Comments

ब्राउज़र पर निर्भर करता है। इस बेंचमार्क को एक उदाहरण के रूप में लें : FF 5 में, "सामान्य" एक "अनुकूलित" संस्करण के समान समय में चलता है। और यहां तक ​​कि वास्तव में पुराने और सुस्त ब्राउज़रों में, जेएस वास्तव में तत्वों के साथ ब्याज की कुछ भी करता है तो इस तरह की संभावना कुछ अड़चन नहीं होगी।

हम्म! शायद आज के अति-अनुकूलन वाले जेआईटी संकलक इस ज्ञान के बिट को अप्रचलित कर रहे हैं।

— एडम क्रॉसलैंड

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

— जसेक प्रूशिया

@JacekPrucia उन्होंने कहा कि संग्रह , सरणी नहीं - आमतौर पर, वास्तविक कोड में, इसका मतलब होगा कि डोम तत्वों की एक सूची जैसे कि फ़ंक्शन द्वारा लौटाए गए document.getElementsByTagName। फ़ंक्शन एक लाइव देता है nodeListजो हर बार अपनी लंबाई की गणना करता है जब .lengthसंपत्ति तक पहुँचा जाता है।

— यी जियांग

@JacekPrucia बेंचमार्क यह एक प्रदर्शन में सुधार है। संपत्ति की खोज सस्ता नहीं है।

— Raynos

Answer 2

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

प्रदर्शन हत्यारे के रूप में, आप कई बुरे व्यवहार पा सकते हैं:

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

Comments

मैंने देखा है कि कुछ ऐप्स फुल-ब्राउज़र इमेज को घुमाने, आसानी से या चेतन करने की कोशिश करते हैं और इस प्रक्रिया में बुरी तरह से असफल होते हैं - यही वह जगह है जहाँ से फ्लैश रिप्लेसमेंट कमेंट उपजा है :)

— निक

AJAX में पहला A अतुल्यकालिक के लिए खड़ा है, तकनीकी रूप से यह AJAX नहीं है अगर यह सिंक्रोनस है, लेकिन आपकी बात अभी भी एक अच्छी है।

— कार्ल बेवफेल्ड

हाँ ठीक है, यह कड़ाई से AJAX नहीं है। लेकिन वैसे भी, इससे बचा जाना चाहिए: D

— deadalnix

Answer 3

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

प्रदर्शन के साथ एक सबसे बड़ी समस्या अंतर्निहित DOM मॉडल और CSS3 एनीमेशन मॉडल (या कैनवास, या svg) को समझने के बिना उच्च स्तर के सार (जैसे jQuery) का उपयोग कर रही है।

यदि आप नहीं जानते कि इसे अमूर्तता के बिना कैसे किया जाए तो आपको इस बात का पूर्ण शून्य ज्ञान है कि कौन सी तकनीकें तेज या धीमी हैं।

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

Answer 4

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

उन कोड समीक्षाओं से, जिनका मैं एक हिस्सा रहा हूं, प्रमुख चिंताएं सीएसएस रेंडरिंग से संबंधित हैं। नए जेएस डेवलपर्स के लिए, हम वैश्विक दायरे में उपयोग किए जा रहे बहुत से चर को देखते हैं।

इसके अलावा, अनुचित क्लोजर अक्सर मेमोरी लीक का कारण बन सकते हैं। हालाँकि, अधिकांश आधुनिक जावास्क्रिप्ट फ्रेमवर्क इस प्रकार की समस्याओं को तब तक रोकते हैं जब तक आपका कोड फ्रेमवर्क का अनुसरण करता है।

Answer 5

यहाँ एक त्वरित लिंक है जो मैंने एक साल पहले या उससे बेहतर jquery कोड लिखने के बारे में पाया था: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

एक बात मुझे सिर्फ सह-कार्यकर्ता कोड में मिली जो प्रदर्शन को मार रहा था वह कैशिंग डेटा था जिसे कैश करने की आवश्यकता नहीं थी।

उदाहरण:

var table = $("#data").dataTable(.....);

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

Comments

डेटाटेबल्स की तरह लगता है कि वास्तव में अक्षम / गरीब प्लगइन बल्कि एक समस्या कैशिंग के साथ। 5k कुछ भी नहीं है।

— रेयानोस

@ रेयानोस: उन्होंने 5k पंक्तियों को कहा , 5 किलोबाइट डेटा को नहीं। एक "पंक्ति" एक बहुत बड़ी बात हो सकती है।

— क्रिस किसान

@ChrisFarmer यदि एक "पंक्ति" एक बहुत बड़ी चीज है तो आपको एक अलग समस्या है।

— रेयानोस

Answer 6

मैंने सुना है कि forछोरों को कम्प्यूटेशनल रूप से jQuery की तुलना में अधिक तेज है $.each()।

Comments

क्या यह मजाक का जवाब है?

— रेयानोस