Kako brskalnik razčleni HTML in gradi stran (kritična pot za risanje)?

Question

Accepted Answer

**Kritična pot za risanje** je zaporedje korakov, ki jih brskalnik izvede, da HTML, CSS in JS pretvori v piksle. Razumevanje tega pojasnjuje, kaj zaustavlja risanje in kako narediti, da se strani narišejo hitreje. ## Koraki ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## Kaj zaustavlja risanje **CSS blokira risanje.** Brskalnik ne bo narisal, dokler CSSOM ni pripravljen (da se izogne bliskovitemu prikazu nesloganega vsebine). Torej veliki/počasni CSS zamuda prvo risanje — obdržite kritični CSS majhen in ga po možnosti vstavite na mesto. **Sinhronih skript zaustavlja razčlenjevanje.** Navaden ` ``` Slabše je, da sinhroni skript, ki potrebuje CSSOM (npr. bere izračunane sloge), čaka tudi na CSS — tako datoteka CSS lahko posredno zaustavlja skript, ki zaustavlja razčlenjevalnik. ## Kako ga optimizirati - Vstavite CSS v `` (naložite ga zgodaj); vstavite kritični CSS. - Dodajte `defer` (ali `type="module"`) skriptam ali jih postavite pred ``. - Zmanjšajte in stisnite CSS/JS; odstranite nerabljeni pravila. - Uporabite `preload` za kritične pisave/sredstva, `preconnect` za ključne izvore. - Izogibajte se thrashingu postavitve (ponavljajoče se branje/pisanje postavitve v JS) — to prisili dodatne reflow. ## Zakaj je to pomembno Kritična pot za risanje določa merike, kot so First Contentful Paint in Largest Contentful Paint. Znanje, da CSS blokira risanje in sinhroni JS zaustavlja razčlenjevanje, vam pove natančno, zakaj `defer`/`async`, vstavljen kritični CSS in namigi za vire pohitrijo stran — skrajšajo ali odblokujejo to pot.