Čo je kritická cesta vykresľovania webových stránok?

To je zaporedje korakov, ki jih brskalnik izvaja za prikaz vsebine strani na zaslonu, začenši z pridobivanjem HTML dokumenta. Vključuje:

1. Gradnja DOM (Model objekta dokumenta): Analiza HTML kode in ustvarjanje drevesa objektov, ki predstavljajo strukturo dokumenta.
2. Gradnja CSSOM (Model objekta CSS): Analiza CSS datotek in inline stilov za ustvarjanje drevesa objektov, ki predstavljajo stile elementov.
3. Gradnja drevesa za izris: Združevanje DOM in CSSOM. Ustvari se drevo samo z izrisljivimi elementi z uporabljenimi stili.
4. Razporeditev (Layout ali Reflow): Določitev geometrijskih dimenzij in položaja vsakega elementa na strani.
5. Risba (Paint ali Repaint): Polnjenje pikslov na zaslonu na podlagi drevesa za izris in podatkov o razporeditvi.

Optimizacija kritične poti izrisa je usmerjena k temu, da brskalnik čim hitreje prikaže prvi smiselni vsebino (First Meaningful Paint) ali interaktivnost (Time to Interactive). To se doseže z minimalizacijo blokirajočih virov (JS in CSS), optimizacijo velikosti virov in njihovim nalaganjem ob pravem času.