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