𝟳 மறைமுகமான JavaScript செயல்திறன் தடைகள் (Bottlenecks)
மெதுவான இணையப் பயன்பாடுகள் (web apps) அரிதாகவே மோசமான அல்காரிதம்களால் தோல்வியடைகின்றன. உங்கள் குறியீடு (code) உலாவியுடன் (browser) எவ்வாறு தொடர்பு கொள்கிறது என்பதாலேயே அவை தோல்வியடைகின்றன.
நான் 300-க்கும் மேற்பட்ட பயன்பாடுகளை ஆய்வு செய்தேன். செயல்திறன் சிக்கல்களில் 73% இந்த 7 காரணங்களால் ஏற்படுகின்றன என்பதைக் கண்டறிந்தேன்.
Layout thrashing ஒரு layout பண்பை (property) வாசித்தவுடன், உடனடியாக DOM-இல் மாற்றங்களைச் செய்யும்போது இது நிகழ்கிறது. இது உலாவியைத் தொடர்ந்து பலமுறை layout-ஐ மறு கணக்கிட (recalculate) கட்டாயப்படுத்துகிறது. • தாக்கம்: 40-60% மெதுவான ரெண்டரிங் (rendering). • தீர்வு: முதலில் அனைத்து வாசிப்புகளையும் (reads) தொகுக்கவும். பின்னர் requestAnimationFrame பயன்படுத்தி அனைத்து எழுதுதல்களையும் (writes) தொகுக்கவும்.
Unbounded event listeners ஒரு listener-ஐ நீக்காமல் அப்படியே விடுவது மெமரி கசிவை (memory leaks) ஏற்படுத்தும். இது single-page apps-களில் ஒரு பெரிய பிரச்சனையாகும். • தாக்கம்: ஒரு மணி நேரத்திற்கு 15-30% மெமரி அதிகரிப்பு. • தீர்வு: ஒரு component நீக்கப்படும்போது (unmounts), listener-களைச் சுத்தம் செய்ய AbortController-ஐப் பயன்படுத்தவும்.
Synchronous DOM வாசிப்புகள் (reads) லூப்களுக்குள் (loops) DOM-இல் மாற்றங்களைச் செய்யும் அதே லூப்பிற்குள் offsetWidth போன்ற பண்புகளை வாசிப்பது தொடர்ச்சியான reflow-களை ஏற்படுத்தும். • தாக்கம்: 20-40% பிரேம் டிராப்ஸ் (frame drops). • தீர்வு: லூப் தொடங்குவதற்கு முன்பே உங்கள் layout மதிப்புகளை ஒரு வேரியபிளில் (variable) சேமித்து வைக்கவும் (cache).
requestAnimationFrame தொகுப்பு (batching) இல்லாமை scroll அல்லது resize நிகழ்வுகளின் போது நேரடியாக DOM-இல் மாற்றங்களைச் செய்வது அடிக்கடி நிகழ்கிறது. • தாக்கம்: ஸ்க்ரோலிங் செய்யும்போது 10-25% ஜங்க் (jank). • தீர்வு: paint cycle-உடன் ஒருங்கிணைக்க உங்கள் scroll handlers-களை requestAnimationFrame-க்குள் வைக்கவும்.
பெரிய JSON.parse அழைப்புகள் மிகப்பெரிய JSON கோப்புகளைப் பகுப்பாய்வு செய்வது (parsing) மெயின் திரெட்டை (main thread) முடக்கும். இது இன்புட் லேக் (input lag) ஏற்படக் காரணமாகிறது. • தாக்கம்: ஒவ்வொரு அழைப்பிலும் 50-200ms முடக்கம் (freezes). • தீர்வு: மெயின் திரெட்டைத் தவிர்த்து தரவைப் பகுப்பாய்வு செய்ய Web Workers-ஐப் பயன்படுத்தவும்.
சிக்கலான CSS selector பொருத்தம் ஆழமாகத் தொடர்ச்சியாக அமைக்கப்பட்ட அல்லது சிக்கலான selectors ஸ்டைல் மறு கணக்கீடுகளை (style recalculations) மெதுவாக்கும். • தாக்கம்: 5-15% கூடுதல் ஸ்டைல் நேரம். • தீர்வு: உங்கள் CSS கட்டமைப்பை எளிமையாக்கி, தட்டையான (flatter) selectors-களைப் பயன்படுத்தவும்.
நகல் பண்டில் துண்டுகள் (Duplicate bundle chunks) மேம்படுத்தப்படாத பண்டில்கள் (unoptimized bundles) இணையப் பயன்பாட்டை (bandwidth) வீணடிக்கும். • தாக்கம்: 100-500KB வீணான தரவுப் பரிமாற்றம். • தீர்வு: நகல் குறியீடுகளைக் கண்டறிந்து நீக்க webpack-bundle-analyzer போன்ற கருவிகளைப் பயன்படுத்தவும்.
உங்கள் முன்னேற்றத்தை எவ்வாறு அளவிடுவது: • Chrome DevTools-ஐத் திறந்து Performance டேப்பிற்குச் செல்லவும். • 5 வினாடி அமர்வை (session) பதிவு செய்யவும். • Main flame chart-இல் நீண்ட நேரப் பணிகளை (long tasks) தேடவும். • ஒரு தீர்வைச் செயல்படுத்தி, Rendering மற்றும் Painting நேரங்களை ஒப்பிட்டுப் பார்க்கவும்.
உங்கள் Core Web Vitals மதிப்பெண்களை மேம்படுத்த இந்தத் துறைகளில் கவனம் செலுத்துங்கள்.