Hogyan elemzi a böngésző a HTML-t és építi fel az oldalt (critical rendering path)?

Question

Accepted Answer

A **critical rendering path** az a lépéssorozat, amelyet a böngésző a HTML, CSS és JS pixelekké alakításához végez. Az megértése azt magyarázza, hogy mi blokkolja a megjelenítést és hogyan lehet gyorsabban festeni az oldalakat. ## A lépések ```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 ``` ## Mi blokkolja a megjelenítést **A CSS blokkolja a megjelenítést.** A böngésző nem fog rajzolni, amíg a CSSOM kész nem lesz (az unstyled tartalom villanása elkerülésére). Tehát a nagy/lassú CSS késlelteti az első festést — tartsa a kritikus CSS-t kicsire és inline-ja, ha lehetséges. **A szinkron szkriptek blokkoljákaz elemzőt.** Az egyszerű ` ``` Rosszabb, egy szinkron szkript, amely szüksége van a CSSOM-ra (pl. számított stílusok olvasása) szintén vár a CSS-re — így a CSS-fájl közvetlenül blokkolhatja a szkriptet, amely blokkolja az elemzőt. ## Hogyan lehet optimalizálni - Helyezze a CSS-t a `` -be (töltse be korán); inline-ja a kritikus CSS-t. - Adjon `defer` (vagy `type="module"`) a szkriptekhez, vagy helyezze őket a `` elé. - Csökkentse és tömörítse a CSS/JS-t; távolítsa el a nem használt szabályokat. - Használjon `preload`-ot a kritikus betűtípusokhoz/eszközökhöz, `preconnect`-ot a fő forrásokhoz. - Kerülje a layout thrashing-ot (a JS-ben a rendezés ismételt olvasása/írása) — kénytelen további reflows-okat okoz. ## Miért fontos A critical rendering path meghatározza az olyan metrikákat, mint a First Contentful Paint és a Largest Contentful Paint. Tudomásul, hogy a CSS blokkolja a megjelenítést és a szinkron JS blokkolja az elemzést, pontosan elmondja, hogy az `defer`/`async`, az inline-d kritikus CSS és az erőforrás-hints miért gyorsítják fel az oldalt — megrövidítik vagy feloldják ezt az utat.