𝟳 𝗛𝗶𝗱𝗱𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸𝘀
నెమ్మదైన వెబ్ యాప్లు అరుదుగా తక్కువ స్థాయి అల్గారిథమ్స్ వల్ల విఫలమవుతాయి. అవి మీ కోడ్ బ్రౌజర్తో ఎలా సంభాషిస్తుంది అనే దాని వల్ల విఫలమవుతాయి.
నేను 300 కంటే ఎక్కువ ప్రొడక్షన్ యాప్లను ప్రొఫైల్ చేశాను. పెర్ఫార్మెన్స్ సమస్యలలో 73% ఈ 7 వనరుల నుండి వస్తాయని నేను కనుగొన్నాను.
Layout thrashing మీరు ఒక లేఅవుట్ ప్రాపర్టీని చదివి, వెంటనే ఆ తర్వాత DOMకి ఏదైనా రాసినప్పుడు ఇది జరుగుతుంది. ఇది బ్రౌజర్ను పదేపదే లేఅవుట్ను తిరిగి లెక్కించాల్సి వచ్చేలా చేస్తుంది. • ప్రభావం: 40-60% నెమ్మదైన రెండరింగ్. • పరిష్కారం: ముందుగా మీ అన్ని రీడ్స్ను (reads) ఒకేసారి చేయండి. ఆ తర్వాత requestAnimationFrame ఉపయోగించి మీ అన్ని రైట్స్ను (writes) ఒకేసారి చేయండి.
Unbounded event listeners లిజనర్ను తొలగించకుండా యాడ్ చేయడం వల్ల మెమరీ లీక్లు (memory leaks) ఏర్పడతాయి. సింగిల్-పేజీ యాప్లలో ఇది ఒక ప్రధాన సమస్య. • ప్రభావం: గంటకు 15-30% మెమరీ పెరుగుదల. • పరిష్కారం: ఒక కాంపోనెంట్ అన్మౌంట్ (unmount) అయినప్పుడు లిజనర్లను క్లీన్ చేయడానికి AbortControllerని ఉపయోగించండి.
Synchronous DOM reads in loops DOMకి ఏదైనా రాసే లూప్లో offsetWidth వంటి ప్రాపర్టీలను చదవడం వల్ల నిరంతరం reflows జరుగుతాయి. • ప్రభావం: 20-40% ఫ్రేమ్ డ్రాప్స్. • పరిష్కారం: లూప్ ప్రారంభం కావడానికి ముందే మీ లేఅవుట్ విలువలను ఒక వేరియబుల్లో సేవ్ (cache) చేసుకోండి.
Missing requestAnimationFrame batching స్క్రోల్ లేదా రీసైజ్ ఈవెంట్ల సమయంలో నేరుగా DOM మార్పులు చేయడం వల్ల అవి చాలా తరచుగా జరుగుతాయి. • ప్రభావం: స్క్రోలింగ్ సమయంలో 10-25% జాంక్ (jank). • పరిష్కారం: పెయింట్ సైకిల్తో సింక్ అవ్వడానికి మీ స్క్రోల్ హ్యాండ్లర్లను requestAnimationFrameలో ఉంచండి.
Large JSON.parse calls భారీ JSON ఫైళ్లను పార్స్ చేయడం వల్ల మెయిన్ థ్రెడ్ బ్లాక్ అవుతుంది. దీనివల్ల ఇన్పుట్ లాగ్ (input lag) ఏర్పడుతుంది. • ప్రభావం: ప్రతి కాల్కు 50-200ms ఫ్రీజ్. • పరిష్కారం: మెయిన్ థ్రెడ్ నుండి డేటాను పార్స్ చేయడానికి Web Workersని ఉపయోగించండి.
Complex CSS selector matching లోతుగా నెస్టెడ్ (nested) లేదా సంక్లిష్టమైన సెలెక్టర్లు స్టైల్ రీకాల్క్యులేషన్స్ను నెమ్మదింపజేస్తాయి. • ప్రభావం: 5-15% అదనపు స్టైల్ సమయం. • పరిష్కారం: మీ CSS నిర్మాణాన్ని సరళీకృతం చేయండి మరియు ఫ్లాటర్ (flatter) సెలెక్టర్లను ఉపయోగించండి.
Duplicate bundle chunks ఆప్టిమైజ్ చేయని బండిల్స్ బ్యాండ్విడ్త్ను వృథా చేస్తాయి. • ప్రభావం: 100-500KB వృథా ట్రాన్స్ఫర్. • పరిష్కారం: డూప్లికేట్ కోడ్ను కనుగొని తొలగించడానికి webpack-bundle-analyzer వంటి సాధనాలను ఉపయోగించండి.
మీ పురోగతిని ఎలా కొలవాలి: • Chrome DevTools ఓపెన్ చేసి Performance ట్యాబ్కు వెళ్లండి. • 5 సెకన్ల సెషన్ను రికార్డ్ చేయండి. • Main flame chartలో లాంగ్ టాస్క్ల కోసం చూడండి. • ఒక పరిష్కారాన్ని అమలు చేసి, Rendering మరియు Painting సమయాలను పోల్చి చూడండి.
మీ Core Web Vitals స్కోర్లను మెరుగుపరచడానికి ఈ అంశాలపై దృష్టి పెట్టండి.