JavaScript, CSSOM və GPU: “Graphics Processing Unit” və Critical Rendering path

Veb developerlər üçün performans hər şeydir. Modern web tətbiqləri yalniz funksional deyil, həm də smooth, sürətli və vizual cəhətdən cazibədar olmalıdır. Bunun arxasında isə, ənənəvi CPU hesablamaları ilə yanaşı, GPU-nun (Graphics Processing Unit) gücündən istifadə dayanir. Bu yazıda, JavaScript və CSS ilə GPU arasındakı əlaqələri dərindən araşdıracaq, brauzerin qrafika emalında necə işlədiyini, GPU-nun hansı hallarda işə düşdüyünü və bu prosesləri optimallaşdırmaq üçün nələrə diqqət yetirməli olduğunuzu izah edəcəyik.

GPU və Onun Brauzerlərlə Əlaqəsi

GPU ilk növbədə oyunlar və ağır qrafik əməliyyatlar üçün yaradılmışdı, lakin zamanla bu texnologiya veb dünyasına da daxil oldu. 2010-cu illərdə, veb səhifələrin getdikcə daha çox vizual cəhətdən zənginləşməsi və animasiya, video kimi qrafik intensiv işlərə daha çox ehtiyac yaranması ilə GPU-nun web tətbiqlərdəki rolu əhəmiyyətli dərəcədə artdı.

Brauzerlər, GPU-nu istifadə edərək qrafik rendering prosesini sürətləndirməyə başladılar. Bu, CPU-nun yükünü azaldaraq, daha mürəkkəb və zəngin interaktiv təcrübələrin yaradılmasına imkan verdi. Amma bu gücdən səmərəli istifadə etmək üçün, biz developerlərin GPU-nun necə işlədiyini öyrənməsi vacibdir.

Critical Rendering Path: Performansın Ürəyində Yatan Mexanizm

Critical Rendering Path (CRP) veb performansının əsas komponentlərindən biridir. CRP, brauzerin bir veb səhifəni ekranda göstərmək üçün keçdiyi addımların toplusudur və bu prosesin effektivliyi, istifadəçinin səhifəni nə qədər tez görəcəyini müəyyən edir. JavaScript, CSS və GPU ilə əlaqədar olaraq, CRP-ni başa düşmək, tətbiqlərinizin performansını optimallaşdırmaq üçün vacibdir.

CRP-nin Əsas Addımları

Critical Rendering Path-in başa düşülməsi üçün, brauzerin bir səhifəni render etmə prosesini anlamalısınız. CRP əsasən beş addımdan ibarətdir:

1. HTML Analizi və DOM Ağacının Yaradılması: Brauzer, HTML faylını analiz edərək DOM ağacını yaradır. Bu ağac, səhifədəki bütün HTML elementlərini və onların arasındakı əlaqələri təmsil edir.
2. CSS Analizi və CSSOM Ağacının Yaradılması: CSS faylları analiz edilərək CSSOM ağacı yaradılır. Bu ağac, HTML elementlərinin stilini təmsil edir və hansı elementin hansı stil xüsusiyyətlərinə sahib olduğunu göstərir.
3. Render Ağacının Yaradılması: DOM və CSSOM ağacları birləşdirilərək render ağacı yaradılır. Render ağacı, birbaşa ekranda göstəriləcək elementləri və onların necə görünəcəyini təmsil edir.
4. Layout: Brauzer render ağacını təhlil edərək, hər bir elementin ekranda necə yerləşəcəyini və nə qədər yer tutacağını təyin edir.
5. Paint və Composite Layers: Brauzer, render ağacını rəngləyərək, hər bir elementin ekran üzərində hansı rəng və qrafik xüsusiyyətlərə malik olacağını müəyyən edir. Daha sonra, bu elementlər GPU tərəfindən render ediləcək müxtəlif qatlara (layers) bölünür.

CRP-nin Performansa Təsiri

Critical Rendering Path, veb səhifənin ilk görüntülənmə vaxtını (first paint time) birbaşa təsir edir. Bu müddət ərzində brauzer yalnız HTML və CSS-in analizi ilə deyil, həm də JavaScript kodunu da işlədərək səhifənin interaktivliyini təmin etməlidir. Bu prosesin hər bir mərhələsi səhifənin nə qədər tez render olunacağını müəyyən edir. CRP nə qədər uzundursa, yəni prosesin hər mərhələsində nə qədər çox iş görülürsə, istifadəçi təcrübəsi bir o qədər gecikə bilər.

Brauzerin Render Prosesini Anlamaq: GPU Hara Daxil Olur?

Brauzerin bir veb səhifəni necə render etdiyini başa düşmək, GPU-nun bu prosesdəki rolunu anlamaq üçün əsasdır. Gəlin bu prosesi addım-addım nəzərdən keçirək.

DOM və CSSOM: HTML və CSS-in Analizi

Birinci mərhələ, HTML və CSS-in analiz edilməsi və müvafiq DOM (Document Object Model) və CSSOM (CSS Object Model) ağaclarının yaradılmasıdır. Bu iki model brauzerin əsas məlumat bazasını təşkil edir və veb səhifənin strukturunu və stilini təmsil edir.

Bu mərhələ tamamilə CPU tərəfindən idarə olunur. Burada brauzer HTML və CSS kodunu oxuyur, onları sintaksis cəhətdən yoxlayır və hər bir elementi DOM və CSSOM ağaclarında təmsil edir. Bu iki model daha sonra render ağacına birləşdirilir ki, bu da son nəticədə ekranda nə göstəriləcəyini müəyyən edir.

Render Tree və Layout: Brauzer Quruluşu Yaratmağa Başlayır

Növbəti mərhələdə, DOM və CSSOM birləşdirilir və render ağacı (render tree) yaradılır. Render ağacı, veb səhifənin necə görünəcəyini təmsil edir, yəni hansı elementlərin ekranda olacağını, onların ölçülərini və yerləşmələrini müəyyən edir. Bu mərhələ də CPU tərəfindən idarə olunur.

Daha sonra, Layout mərhələsi gəlir. Layout, hər bir elementin ekran üzərində necə yerləşəcəyini və nə qədər yer tutacağını müəyyən edir. Məsələn, display: block və ya display: inline kimi CSS xüsusiyyətləri bu mərhələdə nəzərə alınır və elementlərin yerləşmə qaydası təyin olunur.

Paint və Composite Layers: GPU-nun Səhnəyə Gəlişi

Brauzer layout-u təyin etdikdən sonra, növbəti mərhələ paint mərhələsidir. Paint mərhələsi, hər bir elementin hansı rəngdə, formada və qrafik xüsusiyyətlərlə render ediləcəyini müəyyən edir. Bu mərhələdə, brauzer hər bir elementi rəngləyir, yəni onları piksel səviyyəsində təmsil edir.

Buradan etibarən iş GPU-ya keçir. Paint mərhələsində müəyyən edilmiş elementlər, GPU tərəfindən yaradılmış composite layers adlı qatlara bölünür. Bu qatlar GPU tərəfindən idarə olunur və ekrana render olunur. Məhz bu mərhələdə, GPU-nun qrafik emal gücündən faydalanılır. GPU, bu qatları bir araya gətirir və ekrana ən effektiv şəkildə render edir.

GPU-nun Gücündən Səmərəli İstifadə: CSS ilə Optimallaşdırma

Smashing Magazine

GPU-nun faydasını maksimuma çatdırmaq üçün CSS-dən səmərəli istifadə etmək vacibdir. Bəzi CSS xüsusiyyətləri var ki, onlar birbaşa GPU-nu işə salır və brauzerin render prosesini sürətləndirir.

**transform və opacity**: GPU Dostu Xüsusiyyətlər

transform və opacity kimi CSS xüsusiyyətləri GPU tərəfindən idarə olunur və GPU-nun birbaşa işə salınmasına səbəb olur. Məsələn, transform: translate3d(0, 0, 0) xüsusiyyətindən istifadə etdikdə, bu əməliyyat birbaşa GPU tərəfindən yerinə yetirilir. Bu, elementlərin render edilməsini sürətləndirir və animasiyaların daha hamar işləməsinə kömək edir.

Misal üçün:

.my-div {
  transform: translate3d(100px, 0, 0);
}

Bu kod parçası, div elementini ekranda 100 piksel sağa hərəkət etdirir. Brauzer, bu transformasiyanı yerinə yetirmək üçün həmin elementi bir GPU qatına (layer) yerləşdirir və GPU bu qatın renderini yerinə yetirir. Bu da CPU-nun yükünü azaldır və performansı artırır.

will-change: GPU İstifadəsini Əvvəldən Bildirmək

CSS-də az bilinən, amma çox faydalı bir xüsusiyyət də will-change xüsusiyyətidir. Bu xüsusiyyət, brauzerə elementin gələcəkdə hansı xüsusiyyətlərdə dəyişiklik edəcəyini bildirir və brauzer bu dəyişikliklər üçün qabaqcadan hazırlıq görür.

Məsələn:

.my-div {
  will-change: transform;
}

Bu kod, brauzerə bildirir ki, my-div elementi yaxın zamanda transformasiya olunacaq və brauzer həmin elementi artıq bir GPU qatına yerləşdirə bilər. Bu üsul, animasiyaların daha sürətli və hamar olmasına kömək edir.

**composite layers**: Brauzerin Şüurlu Layerləri

Brauzer, GPU üçün yaradılmış composite layers istifadə edərək elementləri müxtəlif qatlara bölə bilər. Bu qatlar GPU tərəfindən paralel olaraq idarə olunur, bu da ümumi render sürətini artırır. Məsələn, müxtəlif z-index dəyərləri olan elementlər və ya position: fixed kimi xüsusiyyətlərə malik elementlər GPU qatlarına bölünür.

Lakin, hər bir əlavə qat (layer) GPU-nun yaddaşından istifadə edir və həddən artıq çox qat yaradıldıqda, bu, əksinə performansı azalda bilər. Ona görə də, composite layers-dən düzgün istifadə etmək vacibdir.

JavaScript və GPU:

JavaScript, xüsusilə animasiya və interaktivlik yaradarkən GPU-dan faydalana bilər. Amma bu prosesi düzgün idarə etmək üçün JavaScript kodunu necə yazmaq lazım olduğunu bilmək vacibdir.

**requestAnimationFrame*: GPU ilə "smooth*" Animasiyalar

JavaScript-də animasiyalar yaratmaq üçün ən yaxşı üsul requestAnimationFrame funksiyasından istifadə etməkdir. Bu funksiya, brauzerin rendering dövrəsinə uyğun olaraq bir callback funksiyasını işə salır və GPU tərəfindən idarə olunur.

function animate() {
  document.querySelector('.my-div').style.transform = 'translateX(100px)';
  requestAnimationFrame(animate);
}
animate();

Bu animasiya, GPU tərəfindən idarə olunan transform xüsusiyyətinə əsaslanır. requestAnimationFrame funksiyası ilə hər dəfə brauzer yeni bir frame yaratdıqda, animasiya bir qədər irəli aparılır. Bu üsul, animasiyaların daha smooth işləməsinə və brauzer performansının optimallaşdırılmasına kömək edir.

WebGL: JavaScript ilə Dərin Qrafik Gücü

JavaScript ilə GPU-dan maksimum səviyyədə faydalanmaq üçün WebGL (Web Graphics Library) istifadə edə bilərsiz. WebGL, JavaScript vasitəsilə birbaşa GPU-da işləyən yüksək səviyyəli qrafik əməliyyatları həyata keçirməyə imkan verir. Bu texnologiya ilə, 3D qrafika, interaktiv animasiyalar və yüksək performanslı vizualizasiya tətbiqləri yaratmaq mümkündür. Amma bu daha uzun, dərin və mənimdə professional olmadığım bir sahə olduğu üçün başqa mənbələrdən WebGL ilə bağlı məlumatlar əldə edə bilərsiz.

Performance Profiling: GPU Yüklənməsini Ölçmək

GPU-nun səmərəli istifadəsini təmin etmək üçün, brauzerinizin development tools-da olan performance profiling alətlərindən istifadə edərək GPU yüklənməsini ölçməlisən. Bu alətlər sənə hansı elementlərin GPU tərəfindən idarə olunduğunu, hansı dəyişikliklərin GPU yüklənməsinə səbəb olduğunu və performance bottleneck-ləri müəyyən etməyə kömək edəcək.

Misal üçün, Chrome DevTools-da Performance tabına keçərək, bir səhifənin render prosesi ilə bağlı dərin məlumat əldə edə bilərsən. Burada, hansı əməliyyatların CPU tərəfindən, hansının isə GPU tərəfindən idarə edildiyini görmək mümkündür.

Overdraw: GPU Yüklənməsinin Əsas Problemlərindən biri

Overdraw, bir elementin digər bir elementin üzərinə bir neçə dəfə render olunması deməkdir və bu, GPU üçün əlavə yük deməkdir. Misal üçün, z-index ilə müxtəlif təbəqələr yaradırsan və həmin təbəqələr bir-birinin üstündən render olunur. Bu hal GPU resurslarını boşuna istifadə edir və performansı azaldır.

Overdraw problemini azaltmaq üçün layout strategiyanı yenidən nəzərdən keçirməlisən və yalnız lazım olduqda z-index və digər overlay xüsusiyyətlərindən istifadə etməlisən.

Yekun: GPU və Veb Performans

GPU-nun gücündən maksimum faydalanmaq, veb tətbiqlərinin performansını optimallaşdırmaq üçün vacibdir. JavaScript və CSS ilə GPU arasında əlaqəni başa düşmək, sənə daha sürətli, smooth və vizual cəhətdən zəngin veb tətbiqləri yaratmaqda kömək edəcək.

Yazıda istifadə etdiyim əsas mənbə və referanslar: https://developer.mozilla.org https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/