Cum desenează browserul
DOM, CSSOM, layout, paint, composite și Core Web Vitals.
Actualizat
Ce face browserul cu HTML-ul
Browserul transformă text (HTML + CSS + JS) în pixeli. Pașii se numesc critical rendering path:
- Parsează HTML → construiește DOM (arborele de elemente).
- Parsează CSS → construiește CSSOM (arborele de stiluri).
- Render tree = DOM + CSSOM, doar elementele vizibile (fără
display: none, fără<head>). - Layout (reflow) — calculează poziția și mărimea fiecărui element.
- Paint — desenează culori, text, umbre, imagini.
- Composite — combină straturile (layers) și le afișează.
Ce blochează afișarea
| Resursă | Blochează? | De ce |
|---|---|---|
<link rel="stylesheet"> |
randarea | fără CSS, pagina ar „sări” când se aplică stilul |
<script src> (simplu) |
parsarea HTML | scriptul poate modifica DOM-ul, deci browserul se oprește |
<script defer> |
nu | se descarcă în paralel, rulează după parsare, în ordine |
<script async> |
nu (aproape) | rulează imediat ce se descarcă, în orice ordine |
<script type="module"> |
nu | se comportă ca defer |
| imagini, fonturi | nu | dar pot cauza layout shift |
Regula: CSS în <head>, JS cu defer / type="module". Next.js face asta automat.
Layout, paint, composite — ce costă
Când modifici stilul unui element, browserul refă pașii de la un anumit punct încolo:
| Schimbi | Refaci | Cost |
|---|---|---|
width, height, margin, padding, top, left, font-size |
layout → paint → composite | scump |
color, background, box-shadow |
paint → composite | mediu |
transform, opacity |
doar composite | ieftin — merge pe GPU |
De-asta animațiile se fac cu transform și opacity, nu cu left sau width.
Core Web Vitals
Metricile prin care Google (și userii) judecă viteza:
| Metrică | Măsoară | Bun |
|---|---|---|
| LCP — Largest Contentful Paint | cât durează până apare elementul principal | < 2.5s |
| INP — Interaction to Next Paint | cât de repede reacționează la click/tastă | < 200ms |
| CLS — Cumulative Layout Shift | cât „sare” conținutul | < 0.1 |
Cum le îmbunătățești: mai puțin JS pe client (Server Components), next/image cu dimensiuni (contra CLS), next/font (fonturi fără salt), cod greu încărcat leneș.
Pe scurt
- HTML → DOM, CSS → CSSOM, apoi layout → paint → composite.
- CSS blochează randarea, scripturile simple blochează parsarea; folosește
defer/module. - Animează doar
transformșiopacity. - LCP, INP, CLS = viteza văzută de user.