Mobil tətbiqdə Render Performansı və "Overdraw" (Həddindən artıq rənglənmə) probleminin aradan qaldırılması

Birinci abzas

Mobil tətbiq interfeysinin rəvanlığı və estetikası istifadəçilərin proqram daxilində keçirdiyi vaxta birbaşa təsir edir. İdman analitikası platformalarında çoxlu sayda cədvəllər, qrafiklər və dinamik siyahılar rəndələnərkən (rendering) cihazın ekran kartı (GPU) üzərinə düşən yük minimuma endirilməlidir. Ekran kadrlarının gecikmədən, saniyədə 60 və ya 120 FPS sürətlə yenilənməsini təmin etmək üçün tərtibatçılar tətbiqdə "Overdraw" problemini tamamilə aradan qaldırmalıdırlar. Bu mürəkkəb vizuallaşdırma prinsiplərini öyrənmək, cihaz performansını maksimuma çatdırmağın yollarını mənimsəmək və ən rəvan işləyən interfeys modullarına sahib tətbiqi yükləmək üçün istifadəçilər mütəmadi olaraq mostbet apk rəsmi portalında təqdim olunan texniki rəhbərlikləri araşdırırlar.

"Overdraw" (Həddindən artıq rənglənmə) nədir?

Overdraw — cihazın ekranındakı eyni bir pikselin tək bir kadr daxilində GPU tərəfindən birdən çox dəfə rənglənməsi hadisəsidir. Bu, adətən üst-üstə yığılmış lazımsız arxa fon (background) rəngləri və mürəkkəb interfeys iyerarxiyası ucbatından baş verir.

Məsələn, əgər tətbiq daxilində əsas ekranın ağ rəngli fonu varsa, onun üzərinə qoyulan cədvəlin də arxa fonu ağ təyin edilibsə və nəhayət cədvəl daxilindəki mətn qutusunun da daxili fonu ağ rəngdədirsə, GPU həmin sahədəki hər bir pikseli üç dəfə rəngləməyə məcbur olur. Bu isə prosessor və ekran kartı resurslarının boş yerə tükənməsinə və nəticədə kadr donmalarına (jank) gətirib çıxarır.

Overdraw səviyyələrinin müəyyən edilməsi və həlli yolları

Mobil əməliyyat sistemlərində mühəndislər üçün xüsusi vizual analiz alətləri mövcuddur. "Debug GPU Overdraw" funksiyası aktivləşdirildikdə, ekran müəyyən rəng çalarlarına boyanır və bu rənglər overdraw dərəcəsini göstərir:

1. Göy rəng (1x Overdraw): Həmin piksel 2 dəfə rənglənilib. Bu, normal və qəbul edilə bilən səviyyədir.
2. Yaşıl rəng (2x Overdraw): Həmin piksel 3 dəfə rənglənilib.
3. Çəhrayı rəng (3x Overdraw): Həmin piksel 4 dəfə rənglənilib. Optimallaşdırmaya ehtiyac var.
4. Qırmızı rəng (4x+ Overdraw): Həmin piksel 5 və ya daha çox dəfə rənglənilib. Bu, ciddi performans xətasıdır və dərhal aradan qaldırılmalıdır.

Overdraw probleminin aradan qaldırılması texnikası:

• Görünməyən fonların silinməsi: Əgər bir element digərinin üzərini tamamilə örtürsə, altdakı elementin background parametrini ləğv etmək (şəffaf etmək) lazımdır.
• Layout iyerarxiyasının düzləşdirilməsi (Flattening): İç-içə keçmiş mürəkkəb dizayn strukturları əvəzinə, daha sadə və düz strukturlardan (məsələn, ConstraintLayout) istifadə edərək elementlərin dərinliyini azaltmaq mütləqdir.