Kaip naršyklė analizuoja HTML ir kuria puslapį (kritinis atvaizdinimo kelias)?

Question

Accepted Answer

**Kritinis atvaizdinimo kelias** yra žingsnių seka, kurią naršyklė atlieka, norint paversti HTML, CSS ir JS į pikselius. Jo supratimas paaiškina, kas blokuoja atvaizdinimą ir kaip paspartinti puslapio piešimą. ## Žingsniai ```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 ``` ## Kas blokuoja atvaizdinimą **CSS blokuoja atvaizdinimą.** Naršyklė nepiešys, kol CSSOM nėra paruoštas (siekiant išvengti nesuformatuoto turinio blyksnio). Todėl didelis/lėtas CSS atideda pirmąjį piešimą — laikykite kritinį CSS mažą ir jį inliniu, kai tik įmanoma. **Sinchroniniai skriptai blokuoja analizatorių.** Paprastas ` ``` Blogiau, sinchroninis scenarijus, kuriam reikia CSSOM (pvz., nuskaito skaičiuotus stilius), laukia ir CSS — taigi CSS failas gali netiesiogiai blokuoti scenarijų, kuris blokuoja analizatorių. ## Kaip jį optimizuoti - Dėkite CSS į `` (įkelkite jį anksti); inliniu kritinį CSS. - Pridėkite `defer` (arba `type="module"`) prie skriptų, arba padėkite juos prieš ``. - Sumažinkite ir suspaudkite CSS/JS; pašalinkite nenaudojamas taisykles. - Naudokite `preload` kritiniams šriftams/ištekliams, `preconnect` pagrindinėms kilmėms. - Venkite išdėstymo trūkinėjimo (pakartotino išdėstymo skaitymo/rašymo JS) — tai verčia papildomus refolius. ## Kodėl tai svarbu Kritinis atvaizdinimo kelias nulemia metrikas, tokias kaip First Contentful Paint ir Largest Contentful Paint. Žinant, kad CSS blokuoja atvaizdinimą ir sinchroninis JS blokuoja analizavimą, jūs žinote tiksliai, kodėl `defer`/`async`, inlininis kritinis CSS ir išteklių patarimai paspartina puslapį — jie trumpina ar atblokuoja šį kelią.