Overdraw в мобилните приложения: какво е, причини и оптимизация

Какво е Overdraw в мобилната графика?

Overdraw — e ситуация, при която един и същ пиксел на екрана се прерисува няколко пъти по време на един кадър на рендиране. В идеалния сценарий всеки пиксел трябва да бъде записан точно веднъж, но в реалните интерфейси поради вложени View, фонови изображения и прозрачни слоеве, GPU извършва повторни записи.

Всяко допълнително прерисуване увеличава времето за рендиране на кадъра. При стандартна честота 60 FPS, за обработка на един кадър се отделят приблизително 16.6 ms. Ако overdraw доведе до превишаване на този лимит, честотата на кадрите пада до 30 FPS или по-ниско, което забележимо влошава плавността на интерфейса.

Според Android Performance Patterns на Google, приложение с коефициент на overdraw 3x харчи три пъти повече време за фрагментния шейдър, отколкото приложение с overdraw 1x. На устройства с ниска производителност на GPU това води до осезаеми забавяния при скролване и анимации.

За мобилните разработчици разбирането на overdraw е критично важно: именно този фактор най-често причинява затреперено скролване и ниска честота на кадрите на привидно прости екрани с голям брой вложени елементи.

Как Overdraw влияе върху производителността на GPU

Конвейерът на GPU се състои от няколко етапа: върхов шейдър, растеризация и фрагментен шейдър. Фрагментният шейдър — най-скъпата част, тъй като се изпълнява за всеки пиксел на всеки примитив. При overdraw x2 фрагментният шейдър обработва два пъти повече пиксели, което пряко увеличава времето на кадъра.

Съвременните мобилни GPU, като Qualcomm Adreno и Apple GPU, притежават механизми Early-Z Test и Hidden Surface Removal, които частично компенсират overdraw. Тези оптимизации обаче работят само при определени условия и не трябва да се разчита единствено на хардуерно ускорение.

Например, при рендиране на полупрозрачни елементи, хардуерният Early-Z е неефективен и всеки пиксел се обработва напълно — overdraw в такива сценарии може да достигне 5x и повече.

Основни причини за прекомерно прерисуване

Многослойни фонове — една от основните причини за overdraw в мобилни приложения. Когато Activity или ViewController зададе цвят на фона, всяко вложено View може да добави собствен фон и пикселът се прерисува на всяко ниво от йерархията.

Изследване на Uber Engineering показа, че премахването на излишни фонове в тяхното Android приложение намали overdraw с 32%, а времето за рендиране на екрана — с 25%. Подобна ситуация в iOS: задаването на opaque = true за непрозрачни View елиминира алфа смесването и предотвратява многократно записване на пиксели.

• Прозрачни наслагвания — елементи с алфа канал над други елементи винаги причиняват overdraw.
• ClipChildren=false — изключване на изрязването на подчинени елементи води до рендиране на невидими области.
• Използване на ShapeDrawable вместо прости цветове увеличава натоварването на фрагментния шейдър.
• Прекомерно влагане — всяко ниво на йерархията на View добавя потенциален слой на прерисуване.

На платформа iOS overdraw често възниква поради използване на прозрачни UIStackView, CALayer с shouldRasterize и припокриващи се UIBlurEffect. Apple препоръчва проверка на overdraw чрез инструмента Core Animation в XCode — той показва зоните на прерисуване като червено наслагване.

Как да диагностицираме Overdraw: инструменти и методи

Debug GPU Overdraw — вграденият инструмент на Android, който оцветява екрана в различни цветове в зависимост от кратността на overdraw. Лилав цвят означава 1x, син — 2x, зелен — 3x, розов — 4x, червен — 5x и повече. Идеалният екран трябва да бъде предимно лилав.

В iOS подобна диагностика се извършва от инструмента Core Animation в състава на XCode Instruments. Той визуализира зоните на прерисуване и показва точния брой записи на пиксел в режим Color Blended Layers. Зелените слоеве — непрозрачни (оптимални), червените — съдържат прозрачност и причиняват overdraw.

• Profile GPU Rendering в Android показва хистограма на времето за рендиране. Високи зелени стълбове показват проблеми с overdraw.
• Renderscript — по-напреднал инструмент за анализ на конвейера за рендиране на устройства с Android 10+.
• Metal Debugger в XCode позволява анализ на всяко преминаване на рендиране и преглед на точния брой извиквания на фрагментния шейдър.

След диагностика е важно да се измери FPS преди и след оптимизация. Разлика от 10–15 FPS при коригиране на overdraw е нормален резултат за сложен екран със списъци и анимации.

Техники за оптимизация на Overdraw в мобилни приложения

Премахване на излишни фонове — най-простият и ефективен метод. В Android е достатъчно да зададете android:windowBackground само за Activity или темата, а не за всяко View. В iOS opaque = true за всички непрозрачни UIView намалява overdraw почти до нула за тези елементи.

Според Google I/O 2019, оптимизацията на overdraw в Google Maps позволи намаляване на времето за рендиране на кадър с 40% чрез обединяване на слоеве и използване на ClipRect за ограничаване на областта за рисуване. Google препоръчва на Android разработчиците следните практики:

• ClipRect — ограничава областта за рисуване на Canvas. Ако извън видимата област няма нищо — GPU не харчи ресурси.
• ViewStub — за рядко използвани или невидими при зареждане елементи. Компонентът се рендира само при извикване на inflate.
• merge и include — намаляват дълбочината на йерархията на View, което намалява броя на преминаванията на рендиране.
• Flat buffers — замяна на вложени Layout с един ConstraintLayout или RelativeLayout.

В iOS оптимизацията се постига чрез конфигуриране на CALayer: задаването на masksToBounds = true изрязва съдържанието извън границите на слоя, а shouldRasterize активира кеширане на растерното представяне за статични слоеве.

Примери за код: премахване на Overdraw в Android и iOS

Нека разгледаме практически примери на Kotlin и Swift, които демонстрират типични сценарии за премахване на overdraw. Първият пример показва оптимизация чрез ClipRect в Android:

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()
        )
        // Рисувайте съдържание само в изрязаната област
        super.onDraw(canvas)
    }
}

Вторият пример — на Swift, показва изключване на прозрачността за слоя, ако елементът не трябва да бъде полупрозрачен:

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

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

Третият пример — използване на ViewStub за отложено зареждане на карта в Android. ViewStub не се рендира, докато не стане видим, което премахва overdraw на етапа на инициализация на екрана:

<!-- 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" />

// Разгъване при поискване
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()