7 దాగి ఉన్న JavaScript పనితీరు అడ్డంకులు (Bottlenecks) మరియు వాటిని ఎలా పరిష్కరించాలి
నెమ్మదైన వెబ్ యాప్లు అరుదుగా తప్పుడు అల్గారిథమ్స్ వల్ల విఫలమవుతాయి. మీ కోడ్ బ్రౌజర్తో ఎలా సంభాషిస్తుంది అనే దాని వల్ల అవి విఫలమవుతాయి.
నేను 300 ప్రొడక్షన్ అప్లికేషన్లను విశ్లేషించాను (profiled). పనితీరు సమస్యలలో 73% ఈ 7 వనరుల నుండి వస్తాయి.
- Layout thrashing మీరు ఒక ప్రాపర్టీని చదివి (read), DOMకి ఏదైనా రాసి (write), మళ్ళీ చదివినప్పుడు ఇది జరుగుతుంది. దీనివల్ల బ్రౌజర్ పదేపదే లేఅవుట్ను తిరిగి లెక్కించాల్సి వస్తుంది (recalculate layout).
- పరిష్కారం: మొదట అన్ని రీడ్స్ను (reads) ఒకేసారి చేయండి. ఆ తర్వాత
requestAnimationFrameఉపయోగించి అన్ని రైట్స్ను (writes) ఒకేసారి చేయండి.
- Unbounded event listeners ఒక ఈవెంట్ లిజనర్ను తీసివేయకుండా (remove చేయకుండా) జోడించడం వల్ల మెమరీ లీక్లు (memory leaks) ఏర్పడతాయి. సింగిల్-పేజీ యాప్స్లో (single-page apps) ఇది ఒక ప్రధాన సమస్య.
- పరిష్కారం: కాంపోనెంట్స్ అన్మౌంట్ (unmount) అయినప్పుడు లిజనర్లను క్లీన్ చేయడానికి
AbortControllerని ఉపయోగించండి.
- Synchronous DOM reads in loops
లూప్ లోపల
offsetWidthలేదాgetBoundingClientRectని చదవడం వల్ల నిరంతరం రిఫ్లోస్ (reflows) జరుగుతాయి.
- పరిష్కారం: లూప్ను ప్రారంభించే ముందు లేఅవుట్ విలువలను ఒక వేరియబుల్లో సేవ్ (cache) చేసుకోండి.
- Missing requestAnimationFrame batching స్క్రోల్ లేదా రీసైజ్ ఈవెంట్ల సమయంలో నేరుగా DOM మార్పులు చేయడం వల్ల అవి చాలా తరచుగా జరుగుతాయి. దీనివల్ల జాంక్ (jank) ఏర్పడుతుంది.
- పరిష్కారం: అప్డేట్లను పెయింట్ సైకిల్తో (paint cycle) సింక్ చేయడానికి ఒక 'ticking variable' మరియు
requestAnimationFrameని ఉపయోగించండి.
- Large JSON.parse payloads పెద్ద ఫైల్లను పార్స్ చేయడం వల్ల మెయిన్ థ్రెడ్ (main thread) బ్లాక్ అవుతుంది. దీనివల్ల ఇన్పుట్ లాగ్ (input lag) ఏర్పడుతుంది.
- పరిష్కారం: మెయిన్ థ్రెడ్ నుండి డేటాను పార్స్ చేయడానికి Web Workersని ఉపయోగించండి.
- Complex CSS selector matching లోతుగా ఉన్న (deeply nested) లేదా సంక్లిష్టమైన సెలెక్టర్లు స్టైల్ రీకాల్క్యులేషన్లను (style recalculations) నెమ్మదింపజేస్తాయి.
- పరిష్కారం: లేఅవుట్ షిఫ్ట్లను (layout shifts) కనుగొనడానికి Lighthouseని ఉపయోగించండి మరియు మీ సెలెక్టర్లను సరళీకరించండి.
- Duplicate bundle chunks పెద్దవి మరియు ఆప్టిమైజ్ చేయని బండిల్లు ట్రాన్స్ఫర్ సమయాన్ని వృధా చేస్తాయి.
- పరిష్కారం: డూప్లికేట్ కోడ్ను కనుగొని తొలగించడానికి
webpack-bundle-analyzerని ఉపయోగించండి.
మీ పురోగతిని ఎలా కొలవాలి:
- Chrome DevTools తెరవండి.
- Performance ట్యాబ్కు వెళ్లండి.
- 5 సెకన్ల సెషన్ను రికార్డ్ చేయండి.
- Main flame chartలో 50ms కంటే ఎక్కువ సమయం తీసుకునే టాస్క్ల కోసం చూడండి.
- ఒక పరిష్కారాన్ని అమలు చేసి, Rendering మరియు Painting సమయాలను పోల్చి చూడండి.
ఈ అంశాలను సరిచేయడం వల్ల మీ Core Web Vitals మెరుగుపడతాయి, ముఖ్యంగా Largest Contentful Paint మరియు Interaction to Next Paint మెరుగుపడతాయి.