𝟳 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀

धीमी वेब ऐप्स शायद ही कभी खराब एल्गोरिदम के कारण विफल होती हैं। वे इसलिए विफल होती हैं क्योंकि आपका कोड ब्राउज़र के साथ कैसे इंटरैक्ट करता है।

मैंने 300 से अधिक प्रोडक्शन ऐप्स का प्रोफाइलिंग किया। मैंने पाया कि 73% परफॉरमेंस संबंधी समस्याएं इन 7 स्रोतों से आती हैं।

  1. Layout thrashing यह तब होता है जब आप किसी लेआउट प्रॉपर्टी को पढ़ते हैं और उसके तुरंत बाद DOM में कुछ लिखते हैं। इससे ब्राउज़र को कई बार लेआउट को फिर से कैलकुलेट करने के लिए मजबूर होना पड़ता है। • प्रभाव: 40-60% धीमी रेंडरिंग। • समाधान: पहले अपनी सभी reads को बैच करें। फिर requestAnimationFrame का उपयोग करके अपनी सभी writes को बैच करें।

  2. Unbounded event listeners किसी लिसनर को हटाए बिना जोड़ना मेमोरी लीक का कारण बनता है। यह सिंगल-पेज ऐप्स में एक बड़ी समस्या है। • प्रभाव: प्रति घंटा 15-30% मेमोरी वृद्धि। • समाधान: जब कोई कंपोनेंट अनमाउंट (unmount) हो, तो लिसनर्स को साफ करने के लिए AbortController का उपयोग करें।

  3. Synchronous DOM reads in loops लूप के अंदर offsetWidth जैसी प्रॉपर्टीज़ को पढ़ना, जो DOM में लिखता भी है, लगातार reflows का कारण बनता है। • प्रभाव: 20-40% फ्रेम ड्रॉप्स। • समाधान: लूप शुरू होने से पहले अपने लेआउट वैल्यूज़ को एक वेरिएबल में कैश (cache) कर लें।

  4. Missing requestAnimationFrame batching स्क्रॉल या रिसाइज इवेंट्स पर सीधे DOM बदलाव बहुत बार ट्रिगर होते हैं। • प्रभाव: स्क्रॉलिंग के दौरान 10-25% jank। • समाधान: पेंट साइकिल (paint cycle) के साथ सिंक करने के लिए अपने स्क्रॉल हैंडलर्स को requestAnimationFrame में रैप करें।

  5. Large JSON.parse calls विशाल JSON फ़ाइलों को पार्स करना मेन थ्रेड (main thread) को ब्लॉक कर देता है। इससे इनपुट लैग होता है। • प्रभाव: प्रति कॉल 50-200ms का फ्रीज़। • समाधान: मेन थ्रेड से अलग डेटा पार्स करने के लिए Web Workers का उपयोग करें।

  6. Complex CSS selector matching गहराई से नेस्टेड या जटिल सिलेक्टर स्टाइल रीकैलकुलेशन को धीमा कर देते हैं। • प्रभाव: 5-15% अतिरिक्त स्टाइल समय। • समाधान: अपने CSS स्ट्रक्चर को सरल बनाएं और flatter selectors का उपयोग करें।

  7. Duplicate bundle chunks अनऑप्टिमाइज़्ड बंडल बैंडविड्थ बर्बाद करते हैं। • प्रभाव: 100-500KB का बर्बाद ट्रांसफर। • समाधान: डुप्लिकेट कोड खोजने और हटाने के लिए webpack-bundle-analyzer जैसे टूल का उपयोग करें।

अपनी प्रगति को कैसे मापें: • Chrome DevTools खोलें और Performance टैब पर जाएं। • 5 सेकंड का एक सेशन रिकॉर्ड करें। • Main flame chart में लंबे कार्यों (long tasks) को देखें। • एक समाधान लागू करें और Rendering और Painting समय की तुलना करें।

अपने Core Web Vitals स्कोर को बेहतर बनाने के लिए इन क्षेत्रों पर ध्यान दें।

स्रोत: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5