Veb səhifələrin renderlənməsində kritik yol nədir?

Bu, brauzerin ekranında səhifənin məzmununu göstərmək üçün yerinə yetirdiyi addımlar ardıcıllığıdır və HTML sənədinin alınması ilə başlayır. Bu, aşağıdakılardan ibarətdir:

1. DOM (Sənəd Obrazı Modeli) qurulması: HTML kodunun təhlili və sənədin strukturunu təmsil edən obyekt ağacının yaradılması.
2. CSSOM (CSS Obrazı Modeli) qurulması: CSS fayllarının və inline-stillərin təhlili və elementlərin stillərini təmsil edən obyekt ağacının yaradılması.
3. Render Ağacının qurulması: DOM və CSSOM-un birləşdirilməsi. Yalnız tətbiq olunan stillərlə render ediləcək elementlərdən ibarət ağac yaradılır.
4. Layout (və ya Reflow): Hər bir elementin geometrik ölçülərinin və mövqeyinin müəyyənləşdirilməsi.
5. Paint (və ya Repaint): Render Ağacı və layout məlumatlarına əsaslanaraq ekrandakı piksellərin doldurulması.

Render yolunun kritik yolunun optimallaşdırılması, brauzerin ilk mənalı məzmunu (First Meaningful Paint) və ya interaktivliyi (Time to Interactive) mümkün qədər tez göstərməsinə yönəlib. Bu, bloklayıcı resursların (JS və CSS) minimallaşdırılması, resursların ölçüsünün optimallaşdırılması və onların uyğun zamanda yüklənməsi ilə həyata keçirilir.