Overdraw mobil ilovalarda: bu nima, sabablari va optimallashtirish

Mobil grafikada Overdraw nima?

Overdraw — bir ekran pikseli bitta renderlash kadri davomida bir necha marta qayta chiziladigan holatdir. Ideal stsenariyda har bir piksel aniq bir marta yozilishi kerak, ammo real interfeyslarda ichma-ich Viewlar, fon tasvirlari va shaffof qatlamlar tufayli GPU takroriy yozishlarni amalga oshiradi.

Har bir qo'shimcha qayta chizish kadr renderlash vaqtini oshiradi. Standart 60 FPS chastotasida bitta kadrni qayta ishlashga taxminan 16.6 ms ajratiladi. Agar overdraw bu limitdan oshib ketsa, kadr chastotasi 30 FPS yoki undan pastga tushadi, bu interfeys silliqligini sezilarli darajada yomonlashtiradi.

Android Performance Patterns ma'lumotiga ko'ra, overdraw koeffitsienti 3x bo'lgan ilova fragment shaderiga overdraw 1x bo'lgan ilovaga qaraganda uch baravar ko'p vaqt sarflaydi. Past GPU unumdorligiga ega qurilmalarda bu skrollash va animatsiya paytida sezilarli kechikishlarga olib keladi.

Mobil dasturchilar uchun overdrawni tushunish juda muhim: aynan shu omil ko'p sonli ichma-ich elementlarga ega, oddiy ko'rinadigan ekranlarda tez-tez skrollashning silkinishiga va past kadr chastotasiga sabab bo'ladi.

Overdraw GPU unumdorligiga qanday ta'sir qiladi

GPU konveyeri bir necha bosqichdan iborat: vertex shader, rasterlashtirish va fragment shader. Fragment shader — eng qimmat qism, chunki u har bir primitivning har bir pikseli uchun bajariladi. Overdraw x2 da fragment shader ikki baravar ko'p pikselni qayta ishlaydi, bu esa to'g'ridan-to'g'ri kadr vaqtini oshiradi.

Qualcomm Adreno va Apple GPU kabi zamonaviy mobil GPUlar Early-Z Test va Hidden Surface Removal mexanizmlariga ega bo'lib, ular overdrawni qisman kompensatsiya qiladi. Biroq, bu optimallashtirishlar faqat ma'lum shartlarda ishlaydi va faqat apparat tezlashtirishiga tayanmaslik kerak.

Masalan, yarim shaffof elementlarni renderlashda apparat Early-Z samarasiz va har bir piksel to'liq qayta ishlanadi — bunday stsenariylarda overdraw 5x va undan ko'proqqa yetishi mumkin.

Haddan tashqari qayta chizishning asosiy sabablari

Ko'p qatlamli fonlar — mobil ilovalarda overdrawning asosiy sabablaridan biridir. Activity yoki ViewController fon rangini o'rnatganda, har bir ichma-ich View o'z fonini qo'shishi mumkin va piksel ierarxiyaning har bir darajasida qayta chiziladi.

Uber Engineering tadqiqoti shuni ko'rsatdiki, Android ilovasida ortiqcha fonlarni olib tashlash overdrawni 32%, ekran renderlash vaqtini esa 25% kamaytirgan. iOS da ham xuddi shunday holat: shaffof bo'lmagan Viewlar uchun opaque = true o'rnatish alfa aralashtirishni yo'q qiladi va piksellarning takroriy yozilishining oldini oladi.

• Shaffof qoplamalar — alfa kanaliga ega elementlar boshqa elementlar ustida har doim overdrawga sabab bo'ladi.
• ClipChildren=false — bola elementlarni kesishni o'chirish ko'rinmaydigan joylarning renderlanishiga olib keladi.
• ShapeDrawable dan foydalanish oddiy ranglar o'rniga fragment shader yukini oshiradi.
• Haddan tashqari ichma-ichlik — View ierarxiyasining har bir darajasi potentsial qayta chizish qatlamini qo'shadi.

iOS platformasida overdraw tez-tez shaffof UIStackView, shouldRasterize bilan CALayer va ustma-ust tushadigan UIBlurEffect ishlatilishi sababli yuzaga keladi. Apple XCode da Core Animation vositasi orqali overdrawni tekshirishni tavsiya qiladi — u qayta chizish zonalarini qizil rangli qoplama shaklida ko'rsatadi.

Overdrawni qanday diagnostika qilish kerak: vositalar va usullar

Debug GPU Overdraw — Androidning o'rnatilgan vositasi bo'lib, overdraw ko'pligiga qarab ekranni turli ranglarga bo'yaydi. Binafsha rang 1x, ko'k — 2x, yashil — 3x, pushti — 4x, qizil — 5x va undan ko'pni anglatadi. Ideal ekran asosan binafsha bo'lishi kerak.

iOS da shunga o'xshash diagnostikani XCode Instruments tarkibidagi Core Animation vositasi amalga oshiradi. U qayta chizish zonalarini vizuallashtiradi va Color Blended Layers rejimida piksel boshiga yozishlarning aniq sonini ko'rsatadi. Yashil qatlamlar — shaffof emas (optimal), qizil — shaffoflikni o'z ichiga oladi va overdrawga sabab bo'ladi.

• Profile GPU Rendering Androidda renderlash vaqti gistogrammasini ko'rsatadi. Baland yashil ustunlar overdraw muammolarini ko'rsatadi.
• Renderscript — Android 10+ bo'lgan qurilmalarda renderlash konveyerini tahlil qilish uchun yanada ilg'or vosita.
• Metal Debugger XCode da har bir renderlash o'tishini tahlil qilish va fragment shader chaqiruvlarining aniq sonini ko'rish imkonini beradi.

Diagnostikadan so'ng optimallashtirishdan oldin va keyin FPSni o'lchash muhimdir. Overdrawni tuzatishda 10–15 FPS farqi ro'yxatlar va animatsiyaga ega murakkab ekran uchun oddiy natijadir.

Mobil ilovalarda Overdraw optimallashtirish texnikalari

Ortiqcha fonlarni olib tashlash — eng oddiy va samarali usul. Android da android:windowBackground ni faqat Activity yoki tema uchun o'rnatish kifoya, har bir View uchun emas. iOS da barcha shaffof bo'lmagan UIView lar uchun opaque = true bu elementlar uchun overdrawni amalda nolga tushiradi.

Google I/O 2019 ma'lumotiga ko'ra, Google Maps da overdraw optimallashtirish qatlamlarni birlashtirish va chizish maydonini cheklash uchun ClipRect ishlatish hisobiga kadr renderlash vaqtini 40% ga kamaytirishga imkon berdi. Google Android dasturchilariga quyidagi amaliyotlarni tavsiya qiladi:

• ClipRect — Canvas chizish maydonini cheklaydi. Ko'rinadigan maydondan tashqarida hech narsa bo'lmasa — GPU resurslarni sarflamaydi.
• ViewStub — kam ishlatiladigan yoki yuklash paytida ko'rinmaydigan elementlar uchun. Komponent faqat inflate chaqirilganda renderlanadi.
• merge va include — View ierarxiyasi chuqurligini kamaytiradi, bu renderlash o'tishlari sonini pasaytiradi.
• Flat buffers — ichma-ich Layoutlarni bitta ConstraintLayout yoki RelativeLayout bilan almashtirish.

iOS da optimallashtirish CALayer konfiguratsiyasi orqali erishiladi: masksToBounds = true o'rnatish qatlam chegaralaridan tashqaridagi tarkibni kesadi, shouldRasterize esa statik qatlamlar uchun raster tasvirni keshlashni faollashtiradi.

Kod misollari: Android va iOS da Overdrawni bartaraf etish

Kotlin va Swift da overdrawni bartaraf etishning odatiy stsenariylarini ko'rsatadigan amaliy misollarni ko'rib chiqamiz. Birinchi misol Android da ClipRect orqali optimallashtirishni ko'rsatadi:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Tarkibni faqat kesilgan maydonda chizing
        super.onDraw(canvas)
    }
}

Ikkinchi misol — Swift da, element yarim shaffof bo'lmasligi kerak bo'lsa, qatlam uchun shaffoflikni o'chirishni ko'rsatadi:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

Uchinchi misol — Android da xaritaning kechiktirilgan yuklanishi uchun ViewStub dan foydalanish. ViewStub ko'rinadigan bo'lmaguncha renderlanmaydi, bu esa ekran ishga tushirish bosqichida overdrawni bartaraf etadi:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Talab bo'yicha kengaytirish
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()