Middle
Veb səhifələrinin renderlənməsində kritik yol nədir?
sobes.tech Süni İntellekt
AI-dan cavab
Tənqidi Rendering Yolu (Critical Rendering Path - CRP) brauzerin HTML, CSS və JavaScript-i ekran üzərində görünən piksellərə çevirmək üçün həyata keçirdiyi addımlar ardıcıllığıdır. CRP-nin optimallaşdırılması, məzmunun çəkilmə sürətini artırmağa və səhifənin interaktiv olma vaxtını yaxşılaşdırmağa imkan verir.
CRP-nin əsas mərhələləri:
- DOM (Document Object Model) qurulması: Brauzer HTML kodunu analiz edir və səhifənin məzmununu təmsil edən ağac quruluşu yaradır.
- CSSOM (CSS Object Model) qurulması: Brauzer CSS qaydalarını (
<style>və ya xarici CSS fayllarından) analiz edir və hər DOM elementi üçün üslubları təmsil edən ağac quruluşu yaradır. CSS, render prosesini bloklayan resursdur, çünki brauzer üslub məlumatı olmadan render ağacını qura bilməz. - Render Ağacının qurulması: DOM (yalnız görünən düyünlər) və CSSOM-un birləşməsi. Bu ağac səhifədəki bütün görünən elementləri və onların hazır olan üslublarını ehtiva edir.
- Layout (Yerleşdirmə və ya Hesablama): Brauzer hər elementin dəqiq mövqeyini və ölçüsünü hesablayır.
- Paint (Çəkmə): Brauzer hər render ağacındakı elementi ekran üzərində faktiki piksellərə çevirir.
- Composite (Birləşdirmə): Brauzer çəkilmiş qatları yekun şəkil halına gətirir.
CSS və <head> içindəki sinxron JavaScript kimi renderi bloklayan resurslar, CRP-nin qurulma vaxtını artırır. CRP-nin optimallaşdırılması, bloklayan resursların minimallaşdırılması və ya asinxron yüklənməsi, həmçinin kritik məzmunun ("qapı xətti" üzərində) prioritetləşdirilməsini əhatə edir.