Критикалық көрсету жолы туралы айтыңыз — көрсету ағашын құру кезінде не болады?

Критикалық көрсету жолы (CRP) — бұл браузер веб-бетті экранда көрсету үшін орындаған қадамдар тізбегі.

Рендеринг ағашын құру кезінде келесі әрекеттер орындалады:

1. HTML талдау — браузер HTML-ді оқиды және DOM ағашын құрады (Document Object Model).
2. CSS талдау — браузер CSS-ті жүктеп, талдайды, CSSOM-ды (CSS объектілер моделі) құрады.
3. Render ағашын құру — DOM мен CSSOM-ды біріктіру арқылы рендеринг ағашын құру, ол тек көрінетін элементтер мен олардың стильдерін қамтиды.
4. Мәліметтерді орналастыру (Reflow) — әрбір элементтің нақты өлшемдері мен орналасуын есептеу.
5. Сурет салу — пиксельдерді экранға салу.

Маңызды сәт — браузер Render ағашын құрып болғанша, сурет салуды бастай алмайды, сондықтан блоктайтын ресурстар (мысалы, CSS және синхронды скрипттер) көрсетуді кешіктіреді.

CRP-ны оңтайландыру блоктайтын ресурстарды азайту, скрипттерді асинхронды жүктеу, маңызды CSS-ті инлайнинг жасау арқылы алғашқы көрсетуді жылдамдатуға бағытталған.