critical rendering path શું છે અને તેને શું block કરે છે?

Question

IT Interview Practice · Accepted Answer

**Critical rendering path** એ browser HTML, CSS, અને JS ને screen પર pixel માં ફેરવવા માટે ચલાવે છે તે પગલાંનો ક્રમ છે. first paint *પહેલાં* પૂરું થવું જ પડે તે કંઈપણ **render-blocking** છે. ## પગલાં 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 છે** — browser CSS download અને parse ન થાય ત્યાં સુધી paint નહીં કરે, કારણ કે flash of unstyled content ટાળવા તેને style જોઈએ છે. - **Synchronous JS parser-blocking છે** — સાદો ` ``` DOM ને સ્પર્શતા app code માટe `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 ને સમજો છો.

પગલાં

તેને શું block કરે છે

આ શા માટે મહત્વનું છે

સંબંધિત પ્રશ્નો