Overdraw i mobilappar: vad det är, orsaker och optimering

Vad är Overdraw i mobil grafik?

Overdraw — är situationen där samma skärmpixel ritas om flera gånger under en renderingsbildruta. I det ideala scenariot bör varje pixel skrivas exakt en gång, men i verkliga gränssnitt på grund av kapslade vyer, bakgrundsbilder och transparenta lager utför GPU:n upprepade skrivningar.

Varje extra omritning ökar renderingstiden för bildrutan. Vid standardfrekvensen 60 FPS är cirka 16.6 ms tilldelat för bearbetning av en bildruta. Om overdraw leder till att denna gräns överskrids sjunker bildfrekvensen till 30 FPS eller lägre, vilket märkbart försämrar gränssnittets jämnhet.

Enligt Android Performance Patterns från Google lägger en app med overdraw-koefficient 3x tre gånger så mycket tid på fragment shadern som en app med overdraw 1x. På enheter med låg GPU-prestanda leder detta till märkbara fördröjningar vid scrollning och animationer.

För mobilutvecklare är förståelse av overdraw avgörande: det är just denna faktor som oftast orsakar ryckig scrollning och låg bildfrekvens på till synes enkla skärmar med många kapslade element.

Hur Overdraw påverkar GPU-prestanda

GPU-pipelinen består av flera steg: vertex shader, rastrering och fragment shader. Fragment shader — den dyraste delen eftersom den exekveras för varje pixel i varje primitiv. Vid overdraw x2 bearbetar fragment shadern dubbelt så många pixlar, vilket direkt ökar bildrutetiden.

Moderna mobila GPU:er som Qualcomm Adreno och Apple GPU har mekanismer för Early-Z Test och Hidden Surface Removal som delvis kompenserar overdraw. Dessa optimeringar fungerar dock bara under vissa förhållanden och man bör inte förlita sig enbart på hårdvaruacceleration.

Vid rendering av halvgenomskinliga element är hårdvaru-Early-Z till exempel ineffektiv och varje pixel bearbetas fullständigt — overdraw i sådana scenarier kan nå 5x och mer.

Huvudorsaker till överdriven omritning

Flerskiktiga bakgrunder — en av huvudorsakerna till overdraw i mobilappar. När en Activity eller ViewController ställer in en bakgrundsfärg kan varje kapslad vy lägga till sin egen bakgrund och pixeln ritas om på varje nivå i hierarkin.

Forskning från Uber Engineering visade att borttagning av överflödiga bakgrunder i deras Android-app minskade overdraw med 32% och skärmrenderingstiden med 25%. Liknande situation i iOS: att ställa in opaque = true för ogenomskinliga vyer eliminerar alfa-blandning och förhindrar flerfaldig skrivning av pixlar.

• Transparenta överlägg — element med alfakanal ovanför andra element orsakar alltid overdraw.
• ClipChildren=false — avaktivering av beskärning av underordnade element leder till rendering av osynliga områden.
• Användning av ShapeDrawable istället för enkla färger ökar belastningen på fragment shadern.
• Överdriven kapsling — varje nivå i vyhierarkin lägger till ett potentiellt omritningslager.

På iOS-plattformen uppstår overdraw ofta på grund av användning av transparenta UIStackView, CALayer med shouldRasterize och överlappande UIBlurEffect. Apple rekommenderar att kontrollera overdraw via Core Animation-verktyget i XCode — det visar omritningszoner som en röd överlagring.

Hur man diagnostiserar Overdraw: verktyg och metoder

Debug GPU Overdraw — det inbyggda Android-verktyget som färgar skärmen i olika färger beroende på overdraw-multipliciteten. Lila färg betyder 1x, blå — 2x, grön — 3x, rosa — 4x, röd — 5x och mer. Den ideala skärmen bör vara övervägande lila.

I iOS utförs liknande diagnostik av Core Animation-verktyget i XCode Instruments. Det visualiserar omritningszoner och visar det exakta antalet skrivningar per pixel i Color Blended Layers-läget. Gröna lager — ogenomskinliga (optimala), röda — innehåller transparens och orsakar overdraw.

• Profile GPU Rendering i Android visar ett histogram över renderingstiden. Höga gröna staplar indikerar problem med overdraw.
• Renderscript — ett mer avancerat verktyg för analys av renderingspipelinen på enheter med Android 10+.
• Metal Debugger i XCode gör det möjligt att analysera varje renderingspass och se det exakta antalet fragment shader-anrop.

Efter diagnos är det viktigt att mäta FPS före och efter optimering. En skillnad på 10–15 FPS vid korrigering av overdraw är ett normalt resultat för en komplex skärm med listor och animationer.

Overdraw-optimeringstekniker i mobilappar

Ta bort överflödiga bakgrunder — den enklaste och mest effektiva metoden. I Android räcker det att ställa in android:windowBackground endast för Activity eller temat, inte för varje vy. I iOS minskar opaque = true för alla ogenomskinliga UIView overdraw till nästan noll för dessa element.

Enligt Google I/O 2019 möjliggjorde overdraw-optimering i Google Maps en minskning av bildrutans renderingstid med 40% genom att kombinera lager och använda ClipRect för att begränsa ritområdet. Google rekommenderar följande praxis för Android-utvecklare:

• ClipRect — begränsar Canvas ritområde. Om det inte finns något utanför det synliga området — slösar GPU:n inte resurser.
• ViewStub — för sällan använda eller vid laddning osynliga element. Komponenten renderas endast vid anrop av inflate.
• merge och include — minskar djupet på vyhierarkin, vilket minskar antalet renderingspass.
• Flat buffers — ersättning av kapslade Layouts med en ConstraintLayout eller RelativeLayout.

I iOS uppnås optimering genom CALayer-konfiguration: att ställa in masksToBounds = true beskär innehåll utanför lagrets gränser, och shouldRasterize aktiverar cachning av rasterrepresentationen för statiska lager.

Kodexempel: ta bort Overdraw i Android och iOS

Låt oss titta på praktiska exempel i Kotlin och Swift som demonstrerar typiska scenarier för borttagning av overdraw. Det första exemplet visar optimering genom ClipRect i 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()
        )
        // Rita innehåll endast inom beskuret område
        super.onDraw(canvas)
    }
}

Det andra exemplet — i Swift, visar avaktivering av transparens för lagret om elementet inte ska vara halvgenomskinligt:

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

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

Det tredje exemplet — användning av ViewStub för fördröjd laddning av karta i Android. ViewStub renderas inte förrän det blir synligt, vilket eliminerar overdraw i initialiseringsfasen av skärmen:

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

// Expandera på begäran
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()