Mis on kriitiline renderdusteek webilehtede jaoks?

See on järjekord samme, mida brauser täidab, et kuvada lehe sisu ekraanil, alustades HTML-dokumendi saamisest. See hõlmab:

1. DOM-i (Dokumendi objekti mudeli) loomine: HTML-koodi analüüs ja objekti puu loomine, mis esindab dokumendi struktuuri.
2. CSSOM-i (CSS objekti mudeli) loomine: CSS-failide ja inline stiilide analüüs, et luua objekti puu, mis esindab elementide stiile.
3. Renderipuu loomine: DOM-i ja CSSOM-i ühendamine. Luua ainult renderdatavate elementide puu koos rakendatud stiilidega.
4. Layout (või Reflow): Iga elemendi geomeetriliste mõõtmete ja positsiooni määramine lehel.
5. Värvimine (või Repaint): Pikslite täitmine ekraanil, põhinedes renderipuu ja layout andmetel.

Kriitilise renderimistee optimeerimine on suunatud sellele, et brauser kuvaks võimalikult kiiresti esimese tähendusliku sisu (First Meaningful Paint) või interaktiivsuse (Time to Interactive). Seda saavutatakse minimeerides blokeerivaid ressursse (JS ja CSS), optimeerides ressursside suurust ja nende laadimist sobival ajal.