Critical rendering path అంటే ఏమిటి మరియు దాన్ని ఏది block చేస్తుంది?

Question

IT Interview Practice · Accepted Answer

**Critical rendering path** అనేది HTML, CSS, మరియు JS ను screen పై pixel లుగా మార్చడానికి browser run చేసే step ల క్రమం. First paint కు *ముందు* పూర్తి కావాల్సిన ఏదైనా **render-blocking**. ## Step లు 1. **HTML** ను parse చేయండి → DOM tree ను నిర్మించండి. 2. **CSS** ను parse చేయండి → CSSOM tree ను నిర్మించండి. 3. DOM + CSSOM ను కలపండి → render tree. 4. **Layout** (position లు/size లు) → **Paint** (pixel లు). ## దాన్ని ఏది block చేస్తుంది - **CSS default గా render-blocking** — CSS download మరియు parse అయ్యే వరకు browser paint చేయదు, ఎందుకంటే flash of unstyled content ను నివారించడానికి దానికి style లు అవసరం. - **Synchronous JS parser-blocking** — ఒక సాదా ` ``` DOM ను touch చేసే app code కోసం `defer` వాడండి, మరియు analytics వంటి స్వతంత్ర script ల కోసం `async` వాడండి. Critical CSS ను inline చేయండి మరియు మిగతాదాన్ని block చేయకుండా load చేయండి. ## ఇది ఎందుకు ముఖ్యం ఇది దాదాపు ప్రతి load-time fix వెనుక ఉన్న mental model: render-blocking CSS/JS అనేది నెమ్మదైన first paint మరియు పేలవమైన LCP కు అగ్ర కారణం. `defer`/`async` *ఎందుకు* ఉన్నాయో తెలుసుకోవడం మీరు కేవలం syntax ను కాదు, browser ను అర్థం చేసుకున్నారని చూపిస్తుంది.

Step లు

దాన్ని ఏది block చేస్తుంది

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు