Hvordan parser browseren HTML og bygger siden (kritisk renderingsti)?

Question

Accepted Answer

**Kritisk renderingsti** er sekvensen af trin, som browseren tager for at omdanne HTML, CSS og JS til pixels. At forstå det forklarer, hvad der blokerer rendering, og hvordan man får sider til at tegne hurtigere. ## Trinene ```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 ``` ## Hvad der blokerer rendering **CSS er render-blokerende.** Browseren tegner ikke, før CSSOM er klar (for at undgå et blink af ustyliseret indhold). Så stort/langsomt CSS forsinker første tegning — hold kritisk CSS lille og integrer det inline, når det er muligt. **Synchrone scripts er parser-blokerende.** Et almindeligt ` ``` Værre, et synkront script, der behøver CSSOM'en (f.eks. læser beregnede stilarter) venter på CSS også — så en CSS-fil kan indirekte blokere et script, som blokerer parseren. ## Hvordan man optimerer det - Placer CSS i `` (indlæs det tidligt); integrer kritisk CSS inline. - Tilføj `defer` (eller `type="module"`) til scripts, eller placer dem før ``. - Minimer og komprimer CSS/JS; fjern ubrugte regler. - Brug `preload` til kritiske fonte/aktiver, `preconnect` til vigtige kilder. - Undgå layout thrashing (gentagen læsning/skrivning af layout i JS) — det tvinger ekstra reflows. ## Hvorfor det betyder noget Kritisk renderingsti bestemmer målinger som First Contentful Paint og Largest Contentful Paint. At vide, at CSS blokerer rendering og synkront JS blokerer parsing fortæller dig præcis, hvorfor `defer`/`async`, integreret kritisk CSS og ressourcehints fremskynder en side — de forkorter eller fjerner blokering af denne sti.