Mi az a kritikus renderelési útvonal weboldalak esetében?

Ez egy lépéssorozat, amelyet a böngésző végrehajt a oldal tartalmának megjelenítése érdekében a képernyőn, kezdve az HTML-dokumentum megszerzésével. Magában foglalja:

1. A DOM (Dokumentum Objektum Modell) felépítése: Az HTML-kód elemzése és egy olyan objektumfa létrehozása, amely a dokumentum szerkezetét reprezentálja.
2. A CSSOM (CSS Objektum Modell) felépítése: A CSS-fájlok és inline stílusok elemzése, hogy egy olyan objektumfát hozzon létre, amely az elemek stílusait reprezentálja.
3. A Render Tree (Render Fa) felépítése: A DOM és a CSSOM egyesítése. Csak a renderelésre szánt elemekből álló fa jön létre, a hozzájuk tartozó stílusokkal.
4. Elrendezés (Layout vagy Reflow): Minden elem geometriai méreteinek és helyzetének meghatározása az oldalon.
5. Festés (Paint vagy Repaint): A pixelek kitöltése a képernyőn a Render Tree és a layout adatok alapján.

A kritikus renderelési út optimalizálása arra irányul, hogy a böngésző a lehető leggyorsabban megjelenítse az első értelmes tartalmat (First Meaningful Paint) vagy az interaktivitást (Time to Interactive). Ezt a blokkoló erőforrások (JS és CSS) minimalizálásával, az erőforrások méretének optimalizálásával és azok megfelelő időben történő betöltésével érik el.