7 छिपे हुए JavaScript Bottlenecks और उन्हें ठीक करने के तरीके

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

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

  1. Layout thrashing यह तब होता है जब आप किसी प्रॉपर्टी को पढ़ते हैं, DOM में कुछ लिखते हैं, और फिर से पढ़ते हैं। यह ब्राउज़र को बार-बार लेआउट को recalculate करने के लिए मजबूर करता है।
  1. Unbounded event listeners किसी event listener को हटाए बिना जोड़ना memory leaks पैदा करता है। यह single-page apps में एक बड़ी समस्या है।
  1. लूप में Synchronous DOM reads लूप के अंदर offsetWidth या getBoundingClientRect को पढ़ने से लगातार reflows होते हैं।
  1. requestAnimationFrame batching की कमी scroll या resize events पर सीधे DOM बदलाव बहुत बार होते हैं। इससे jank होता है।
  1. बड़े JSON.parse payloads बड़ी फाइलों को पार्स (parse) करना main thread को ब्लॉक कर देता है। इससे input lag होता है।
  1. जटिल CSS selector matching गहराई से नेस्टेड या जटिल selectors स्टाइल recalculations को धीमा कर देते हैं।
  1. Duplicate bundle chunks बड़े, अनऑप्टिमाइज़्ड (unoptimized) bundles ट्रांसफर समय बर्बाद करते हैं।

अपनी प्रगति को कैसे मापें:

इन क्षेत्रों को ठीक करने से आपके Core Web Vitals में सुधार होता है, विशेष रूप से Largest Contentful Paint और Interaction to Next Paint में।

Source: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5