७ लपलेले JavaScript परफॉर्मन्स बॉटलनेक्स
संथ वेब ॲप्स सहसा खराब अल्गोरिदममुळे निकामी होत नाहीत. ते तुमचे कोड ब्राउझरशी कशा प्रकारे संवाद साधतात, या कारणास्तव निकामी होतात.
मी ३०० हून अधिक प्रोडक्शन ॲप्सचे प्रोफाईलिंग केले. मला असे आढळले की ७३% परफॉर्मन्सच्या समस्या या ७ स्त्रोतांपासून निर्माण होतात.
१. लेआउट थ्रॅशिंग (Layout thrashing)
जेव्हा तुम्ही एखादी लेआउट प्रॉपर्टी वाचता आणि त्यानंतर लगेच DOM मध्ये बदल (write) करता, तेव्हा हे घडते. यामुळे ब्राउझरला वारंवार लेआउट पुन्हा मोजण्यास (recalculate) भाग पाडले जाते.
• परिणाम: ४०-६०% संथ रेंडरिंग.
• उपाय: प्रथम सर्व 'reads' एकत्रित (batch) करा. त्यानंतर requestAnimationFrame वापरून सर्व 'writes' एकत्रित करा.
२. अनबाउंड इव्हेंट लिसनर्स (Unbounded event listeners)
लिसनर जोडल्यानंतर तो काढून न घेतल्यामुळे मेमरी लीक (memory leaks) होतात. सिंगल-पेज ॲप्समध्ये ही एक मोठी समस्या आहे.
• परिणाम: दर तासाला १५-३०% मेमरी वाढ.
• उपाय: जेव्हा एखादा कंपोनंट unmount होतो, तेव्हा लिसनर्स साफ करण्यासाठी AbortController वापरा.
३. लूपमध्ये सिंक्रोनस DOM reads
ज्या लूपमध्ये DOM मध्ये बदल (write) देखील केले जातात, अशा लूपमध्ये offsetWidth सारख्या प्रॉपर्टीज वाचल्यामुळे सतत reflows होतात.
• परिणाम: २०-४०% फ्रेम ड्रॉप्स.
• उपाय: लूप सुरू होण्यापूर्वी तुमच्या लेआउट व्हॅल्यूज एखाद्या व्हेरिएबलमध्ये कॅश (cache) करा.
४. requestAnimationFrame बॅचिंगचा अभाव
स्क्रोल किंवा रिसाईज इव्हेंट्सवर थेट DOM बदल केल्यामुळे ते खूप वारंवार कार्यान्वित होतात.
• परिणाम: स्क्रोलिंग दरम्यान १०-२५% जँक (jank).
• उपाय: पेंट सायकलशी (paint cycle) सिंक करण्यासाठी तुमच्या स्क्रोल हँडलर्सना requestAnimationFrame मध्ये गुंडाळा (wrap).
५. मोठ्या JSON.parse कॉल्स प्रचंड मोठ्या JSON फाइल्स पार्स केल्यामुळे मेन थ्रेड ब्लॉक होतो. यामुळे इनपुट लॅग (input lag) निर्माण होतो. • परिणाम: प्रत्येक कॉलसाठी ५०-२००ms फ्रीझ. • उपाय: मेन थ्रेडच्या बाहेर डेटा पार्स करण्यासाठी Web Workers वापरा.
६. जटिल CSS सिलेक्टर मॅचिंग खोलवर नेस्टेड किंवा जटिल सिलेक्टरमुळे स्टाईल रीकॅल्क्युलेशनचा वेग मंदावतो. • परिणाम: ५-१५% अतिरिक्त स्टाईल वेळ. • उपाय: तुमची CSS रचना सोपी करा आणि flatter selectors वापरा.
७. ड्युप्लिकेट बंडल चंक्स (Duplicate bundle chunks)
अनऑप्टिमाइझ्ड बंडल्समुळे बँडविड्थ वाया जाते.
• परिणाम: १००-५००KB डेटा ट्रान्सफर वाया जातो.
• उपाय: ड्युप्लिकेट कोड शोधण्यासाठी आणि काढून टाकण्यासाठी webpack-bundle-analyzer सारखी साधने वापरा.
तुमची प्रगती कशी मोजायची: • Chrome DevTools उघडा आणि Performance टॅबवर जा. • ५ सेकंदांचे सेशन रेकॉर्ड करा. • Main flame chart मध्ये लांब टास्क (long tasks) शोधा. • एक उपाय लागू करा आणि Rendering आणि Painting वेळेची तुलना करा.
तुमचे Core Web Vitals स्कोअर सुधारण्यासाठी या क्षेत्रांवर लक्ष केंद्रित करा.