Middle
Mi a weboldalak renderelésének kritikus útja?
sobes.tech MI
Válasz az MI-től
A kritikus renderelési út (Critical Rendering Path - CRP) az a lépéssorozat, amelyet a böngésző végrehajt, hogy a HTML-t, CSS-t és JavaScriptet a képernyőn megjelenő pixelekké alakítsa. A CRP optimalizálásával felgyorsítható a tartalom kirajzolása és javítható az oldal interaktívvá válási ideje.
A CRP fő lépései:
- DOM (Document Object Model) építése: A böngésző elemzi a HTML-kódot, és létrehoz egy fastruktúrát, amely az oldal tartalmát reprezentálja.
- CSSOM (CSS Object Model) építése: A böngésző elemzi a CSS szabályokat (
<style>tagekből vagy külső CSS fájlokból), és létrehoz egy fastruktúrát, amely az egyes DOM elemek stílusait reprezentálja. A CSS blokkoló erőforrás, mert a böngésző nem tudja felépíteni a renderelési fát stílusinformációk nélkül. - Render fa építése: A DOM (csak látható csomópontok) és a CSSOM egyesítése. Ez a fa tartalmazza az összes látható elemet az oldalon és azok stílusait, amelyek készen állnak a renderelésre.
- Elrendezés (Layout): A böngésző kiszámítja minden elem pontos helyét és méretét az oldalon.
- Festés (Paint): A böngésző minden render fa elemét tényleges pixellé alakítja a képernyőn.
- Összeállítás (Composite): A böngésző összefűzi a megjelenített rétegeket egy végső képpé.
A renderelést blokkoló erőforrások (például a CSS és a szinkron JavaScript a <head>-ben) növelik a CRP építési idejét. A CRP optimalizálása magában foglalja a blokkoló erőforrások minimalizálását vagy aszinkron betöltését, valamint a kritikus tartalom (a "fold" fölött) betöltésének prioritását.