𝟳 മറഞ്ഞിരിക്കുന്ന JavaScript പെർഫോമൻസ് തടസ്സങ്ങൾ
മോശം അൽഗോരിതങ്ങൾ കാരണമാണ് വെബ് ആപ്പുകൾ അപൂർവ്വമായി മാത്രം പരാജയപ്പെടുന്നത്. നിങ്ങളുടെ കോഡ് ബ്രൗസറുമായി എങ്ങനെ സംവദിക്കുന്നു എന്നതിനാലാണ് അവ പരാജയപ്പെടുന്നത്.
ഞാൻ 300-ലധികം പ്രൊഡക്ഷൻ ആപ്പുകൾ പരിശോധിച്ചു. പെർഫോമൻസ് പ്രശ്നങ്ങളിൽ 73% ഈ 7 കാരണങ്ങളാലാണെന്ന് ഞാൻ കണ്ടെത്തി.
Layout thrashing ഒരു ലേഔട്ട് പ്രോപ്പർട്ടി (layout property) വായിച്ചതിന് തൊട്ടുപിന്നാലെ DOM-ൽ മാറ്റങ്ങൾ വരുത്തുമ്പോഴാണ് ഇത് സംഭവിക്കുന്നത്. ഇത് ബ്രൗസറിനെ പലതവണ ലേഔട്ട് വീണ്ടും കണക്കാക്കാൻ (recalculate) നിർബന്ധിക്കുന്നു. • ആഘാതം: 40-60% വേഗത കുറഞ്ഞ റെൻഡറിംഗ്. • പരിഹാരം: ആദ്യം എല്ലാ റീഡുകളും (reads) ഒരുമിച്ച് ചെയ്യുക. അതിനുശേഷം
requestAnimationFrameഉപയോഗിച്ച് എല്ലാ റൈറ്റുകളും (writes) ഒരുമിച്ച് ചെയ്യുക.Unbounded event listeners ഒരു ലിസണർ (listener) നീക്കം ചെയ്യാതെ തന്നെ പുതിയവ ചേർക്കുന്നത് മെമ്മറി ലീക്കുകൾക്ക് (memory leaks) കാരണമാകുന്നു. സിംഗിൾ പേജ് ആപ്പുകളിൽ (single-page apps) ഇതൊരു പ്രധാന പ്രശ്നമാണ്. • ആഘാതം: മണിക്കൂറിന് 15-30% മെമ്മറി വർദ്ധനവ്. • പരിഹാരം: ഒരു കോമ്പോണന്റ് അൺമൗണ്ട് (unmount) ചെയ്യുമ്പോൾ ലിസണറുകൾ നീക്കം ചെയ്യാൻ ഒരു
AbortControllerഉപയോഗിക്കുക.Synchronous DOM reads in loops DOM-ൽ മാറ്റങ്ങൾ വരുത്തുന്ന ഒരു ലൂപ്പിനുള്ളിൽ
offsetWidthപോലുള്ള പ്രോപ്പർട്ടികൾ വായിക്കുന്നത് നിരന്തരമായ റീഫ്ലോകൾക്ക് (reflows) കാരണമാകുന്നു. • ആഘാതം: 20-40% ഫ്രെയിം ഡ്രോപ്പുകൾ. • പരിഹാരം: ലൂപ്പ് തുടങ്ങുന്നതിന് മുമ്പ് ലേഔട്ട് വാല്യൂകൾ ഒരു വേരിയബിളിൽ സേവ് (cache) ചെയ്യുക.Missing requestAnimationFrame batching സ്ക്രോൾ (scroll) അല്ലെങ്കിൽ റീസൈസ് (resize) ഇവന്റുകളിൽ നേരിട്ട് DOM മാറ്റങ്ങൾ വരുത്തുന്നത് വളരെ തവണ സംഭവിക്കുന്നു. • ആഘാതം: സ്ക്രോളിംഗ് സമയത്ത് 10-25% ജാങ്ക് (jank). • പരിഹാരം: പെയിന്റ് സൈക്കിളുമായി (paint cycle) സിങ്ക് ചെയ്യുന്നതിനായി നിങ്ങളുടെ സ്ക്രോൾ ഹാൻഡ്ലറുകൾ
requestAnimationFrame-ൽ ഉൾപ്പെടുത്തുക.Large JSON.parse calls വലിയ JSON ഫയലുകൾ പാഴ്സ് ചെയ്യുന്നത് മെയിൻ ത്രെഡിനെ (main thread) തടസ്സപ്പെടുത്തുന്നു. ഇത് ഇൻപുട്ട് ലാഗ് (input lag) ഉണ്ടാക്കുന്നു. • ആഘാതം: ഓരോ കോളിലും 50-200ms ഫ്രീസ്. • പരിഹാരം: മെയിൻ ത്രെഡിന് പുറത്ത് ഡാറ്റ പാഴ്സ് ചെയ്യാൻ Web Workers ഉപയോഗിക്കുക.
Complex CSS selector matching ആഴത്തിൽ ഇരിക്കുന്നതോ സങ്കീർണ്ണമായതോ ആയ സെലക്ടറുകൾ സ്റ്റൈൽ റീകാൽക്കുലേഷനുകൾ (style recalculations) സാവധാനത്തിലാക്കുന്നു. • ആഘാതം: 5-15% അധിക സ്റ്റൈൽ സമയം. • പരിഹാരം: നിങ്ങളുടെ CSS ഘടന ലളിതമാക്കുകയും ഫ്ലാറ്റർ (flatter) സെലക്ടറുകൾ ഉപയോഗിക്കുകയും ചെയ്യുക.
Duplicate bundle chunks ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ബണ്ടിലുകൾ ബാൻഡ്വിഡ്ത്ത് പാഴാക്കുന്നു. • ആഘാതം: 100-500KB ഡാറ്റാ ട്രാൻസ്ഫർ പാഴാകുന്നു. • പരിഹാരം: ഡ്യൂപ്ലിക്കേറ്റ് കോഡ് കണ്ടെത്താനും നീക്കം ചെയ്യാനും
webpack-bundle-analyzerപോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക.
നിങ്ങളുടെ പുരോഗതി എങ്ങനെ അളക്കാം: • Chrome DevTools തുറന്ന് Performance ടാബിലേക്ക് പോകുക. • 5 സെക്കൻഡ് ദൈർഘ്യമുള്ള ഒരു സെഷൻ റെക്കോർഡ് ചെയ്യുക. • Main flame chart-ൽ നീളമുള്ള ടാസ്ക്കുകൾ (long tasks) ഉണ്ടോ എന്ന് പരിശോധിക്കുക. • ഒരു പരിഹാരം നടപ്പിലാക്കിയ ശേഷം Rendering, Painting സമയങ്ങൾ തമ്മിൽ താരതമ്യം ചെയ്യുക.
നിങ്ങളുടെ Core Web Vitals സ്കോറുകൾ മെച്ചപ്പെടുത്താൻ ഈ മേഖലകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.