𝟩 மறைமுகமான JavaScript Bottlenecks மற்றும் அவற்றைச் சரிசெய்வது எப்படி
மெதுவான இணையப் பயன்பாடுகள் (web apps) அரிதாகவே மோசமான அல்காரிதம்களால் (algorithms) தோல்வியடைகின்றன. உங்கள் குறியீடு (code) உலாவியுடன் (browser) எவ்வாறு தொடர்பு கொள்கிறது என்பதாலேயே அவை தோல்வியடைகின்றன.
நான் 300 தயாரிப்புப் பயன்பாடுகளை (production applications) ஆய்வு செய்தேன். செயல்திறன் சிக்கல்களில் 73% இந்த 7 காரணிகளிலிருந்து வருகின்றன.
- Layout thrashing நீங்கள் ஒரு பண்பை (property) படித்துவிட்டு, DOM-இல் எழுதும்போது, மீண்டும் ஒருமுறைப் படித்தால் இது நிகழும். இது உலாவியைத் தொடர்ச்சியாக layout-ஐ மறு கணக்கிட (recalculate) கட்டாயப்படுத்துகிறது.
- தீர்வு: முதலில் அனைத்துப் படித்தல்களையும் (reads) தொகுக்கவும். பின்னர்
requestAnimationFrame-ஐப் பயன்படுத்தி அனைத்து எழுதுதல்களையும் (writes) தொகுக்கவும்.
- Unbounded event listeners ஒரு event listener-ஐ நீக்காமல் சேர்த்தால் அது memory leaks-ஐ உருவாக்கும். இது single-page apps-களில் ஒரு முக்கியப் பிரச்சனையாகும்.
- தீர்வு: components unmount ஆகும்போது listeners-களைச் சுத்தம் செய்ய
AbortController-ஐப் பயன்படுத்தவும்.
- லூப்களில் (loops) Synchronous DOM படிவுகள்
ஒரு லூப்பிற்குள்
offsetWidthஅல்லதுgetBoundingClientRect-ஐப் படிப்பது தொடர்ச்சியான reflows-களைத் தூண்டும்.
- தீர்வு: லூப்பைத் தொடங்குவதற்கு முன் layout மதிப்புகளை ஒரு மாறியாக (variable) சேமித்து வைக்கவும் (cache).
- requestAnimationFrame batching இல்லாமை scroll அல்லது resize நிகழ்வுகளின் போது நேரடியாக DOM-இல் மாற்றங்களைச் செய்வது அடிக்கடி நிகழ்கிறது. இது jank-ஐ (திரை தட்டுத்தட்டுதல்) ஏற்படுத்தும்.
- தீர்வு: paint cycle-உடன் புதுப்பிப்புகளை (updates) ஒருங்கிணைக்க ஒரு ticking variable மற்றும்
requestAnimationFrame-ஐப் பயன்படுத்தவும்.
- பெரிய JSON.parse payloads பெரிய கோப்புகளைப் பகுப்பாய்வு செய்வது (parsing) main thread-ஐத் தடுக்கும். இது input lag-ஐ ஏற்படுத்தும்.
- தீர்வு: main thread-க்கு வெளியே தரவைப் பகுப்ப解析 செய்ய Web Workers-ஐப் பயன்படுத்தவும்.
- சிக்கலான CSS selector matching ஆழமாகத் தொகுக்கப்பட்ட அல்லது சிக்கலான selectors, style மறு கணக்கீடுகளைத் தாமதப்படுத்தும்.
- தீர்வு: layout shifts-களைக் கண்டறிய Lighthouse-ஐப் பயன்படுத்தவும் மற்றும் உங்கள் selectors-களை எளிமையாக்கவும்.
- நகல் (Duplicate) bundle chunks பெரிய மற்றும் மேம்படுத்தப்படாத (unoptimized) bundles தரவுப் பரிமாற்ற நேரத்தை வீணடிக்கும்.
- தீர்வு: நகல் குறியீடுகளைக் கண்டறிந்து நீக்க
webpack-bundle-analyzer-ஐப் பயன்படுத்தவும்.
உங்கள் முன்னேற்றத்தை அளவிடுவது எப்படி:
- Chrome DevTools-ஐத் திறக்கவும்.
- Performance tab-க்குச் செல்லவும்.
- 5 வினாடி அமர்வை (session) பதிவு செய்யவும்.
- Main flame chart-இல் 50ms-க்கும் அதிகமான நேரமெடுக்கும் பணிகளைத் (tasks) தேடவும்.
- ஒரு தீர்வைச் செயல்படுத்தி, Rendering மற்றும் Painting நேரங்களை ஒப்பிட்டுப் பார்க்கவும்.
இந்தத் துறைகளைச் சரிசெய்வது உங்கள் Core Web Vitals-ஐ மேம்படுத்தும், குறிப்பாக Largest Contentful Paint மற்றும் Interaction to Next Paint ஆகியவற்றை மேம்படுத்தும்.