Overdraw in mobilen Apps: Was es ist, Ursachen und Optimierung

Was ist Overdraw in der mobilen Grafik?

Overdraw ist eine Situation, in dasselbe Bildschirmpixel innerhalb eines einzigen Rendering-Frames mehrmals neu gezeichnet wird. In einem idealen Szenario sollte jedes Pixel genau einmal geschrieben werden, aber in echten Oberflächen führt die GPU aufgrund von verschachtelten Views, Hintergrundbildern und transparenten Ebenen wiederholte Schreibvorgänge durch.

Jedes zusätzliche Neuziehen erhöht die Frame-Renderzeit. Bei einer standardmäßigen 60 FPS-Rate hat jeder Frame etwa 16,6 ms. Wenn Overdraw dazu führt, dass diese Grenze überschritten wird, sinkt die Bildrate auf 30 FPS oder weniger, was die Flüssigkeit der Oberfläche merklich beeinträchtigt.

Laut Android Performance Patterns von Google verbringt eine App mit einem 3x Overdraw-Faktor dreimal mehr Zeit mit dem Fragment-Shader als eine App mit 1x Overdraw. Auf Geräten mit leistungsschwacher GPU führt dies zu spürbaren Verzögerungen beim Scrollen und bei Animationen.

Für mobile Entwickler ist das Verständnis von Overdraw von entscheidender Bedeutung: Dieser Faktor verursacht am häufigsten ruckelndes Scrollen und niedrige Bildraten auf scheinbar einfachen Bildschirmen mit einer großen Anzahl verschachtelter Elemente.

Wie Overdraw die GPU-Leistung beeinflusst

Die GPU-Pipeline besteht aus mehreren Stufen: Vertex-Shader, Rasterisierung und Fragment-Shader. Der Fragment-Shader ist der teuerste Teil, da er für jedes Pixel jeder Primitive ausgeführt wird. Bei 2x Overdraw verarbeitet der Fragment-Shader doppelt so viele Pixel, was die Frame-Zeit direkt erhöht.

Moderne mobile GPUs wie Qualcomm Adreno und Apple GPU verfügen über Early-Z-Test- und Hidden-Surface-Removal-Mechanismen, die Overdraw teilweise kompensieren. Diese Optimierungen funktionieren jedoch nur unter bestimmten Bedingungen, und man sollte sich nicht ausschließlich auf Hardware-Beschleunigung verlassen.

Beim Rendern von halbtransparenten Elementen ist beispielsweise Hardware-Early-Z unwirksam, und jedes Pixel wird vollständig verarbeitet — Overdraw kann in solchen Szenarien 5x und mehr erreichen.

Hauptursachen für übermäßiges Neuziehen

Mehrschichtige Hintergründe sind eine der Hauptursachen für Overdraw in mobilen Apps. Wenn eine Activity oder ViewController eine Hintergrundfarbe festlegt, kann jede verschachtelte View einen eigenen Hintergrund hinzufügen, und das Pixel wird auf jeder Hierarchieebene neu gezeichnet.

Eine Studie von Uber Engineering zeigte, dass das Entfernen übermäßiger Hintergründe in ihrer Android-App Overdraw um 32% und die Bildschirm-Renderzeit um 25% reduzierte. Eine ähnliche Situation besteht unter iOS: Das Setzen von opaque = true für nicht transparente Views eliminiert Alpha-Blending und verhindert mehrfache Pixel-Schreibvorgänge.

• Transparente Überlagerungen — Elemente mit Alpha-Kanal über anderen Elementen verursachen immer Overdraw.
• ClipChildren=false — Das Deaktivieren des Beschneidens von untergeordneten Elementen führt zum Rendern unsichtbarer Bereiche.
• Verwendung von ShapeDrawable anstelle einfacher Farben erhöht die Belastung des Fragment-Shaders.
• Übermäßige Verschachtelung — jede View-Hierarchieebene fügt eine potenzielle Neuziehschicht hinzu.

Auf der iOS-Plattform tritt Overdraw häufig aufgrund der Verwendung von transparentem UIStackView, CALayer mit shouldRasterize und überlappendem UIBlurEffect auf. Apple empfiehlt, Overdraw mit dem Core Animation Tool in XCode zu überprüfen — es zeigt Neuziehzonen als rote Überlagerung an.

Wie diagnostiziert man Overdraw: Werkzeuge und Methoden

Debug GPU Overdraw ist ein integriertes Android-Tool, das den Bildschirm je nach Overdraw-Faktor unterschiedlich einfärbt. Lila bedeutet 1x, blau — 2x, grün — 3x, pink — 4x, rot — 5x oder mehr. Ein idealer Bildschirm sollte überwiegend lila sein.

Unter iOS wird eine ähnliche Diagnose mit dem Core Animation Tool in XCode Instruments durchgeführt. Es visualisiert Neuziehzonen und zeigt die genaue Anzahl der Pixel-Schreibvorgänge im Modus Color Blended Layers an. Grüne Schichten sind undurchsichtig (optimal), rote enthalten Transparenz und verursachen Overdraw.

• Profile GPU Rendering unter Android zeigt ein Histogramm der Renderzeit. Hohe grüne Balken weisen auf Overdraw-Probleme hin.
• Renderscript ist ein fortschrittlicheres Tool zur Analyse der Rendering-Pipeline auf Android 10+ Geräten.
• Metal Debugger in XCode ermöglicht die Analyse jedes Renderdurchlaufs und die genaue Anzahl der Fragment-Shader-Aufrufe.

Nach der Diagnose ist es wichtig, die FPS vor und nach der Optimierung zu messen. Ein Unterschied von 10–15 FPS bei der Behebung von Overdraw ist ein normales Ergebnis für einen komplexen Bildschirm mit Listen und Animationen.

Overdraw-Optimierungstechniken in mobilen Apps

Übermäßige Hintergründe entfernen ist die einfachste und effektivste Methode. Unter Android setzen Sie android:windowBackground nur für die Activity oder das Theme, nicht für jedes View. Unter iOS reduziert opaque = true für alle nicht transparenten UIView den Overdraw für diese Elemente auf fast Null.

Laut Google I/O 2019 ermöglichte die Overdraw-Optimierung in Google Maps eine Reduzierung der Frame-Renderzeit um 40% durch Zusammenführen von Ebenen und Verwendung von ClipRect zur Begrenzung des Zeichenbereichs. Für Android-Entwickler empfiehlt Google die folgenden Praktiken:

• ClipRect — begrenzt den Canvas-Zeichenbereich. Wenn außerhalb des sichtbaren Bereichs nichts vorhanden ist, verschwendet die GPU keine Ressourcen.
• ViewStub — für selten verwendete oder beim anfänglichen Laden unsichtbare Elemente. Die Komponente rendert nur, wenn inflate aufgerufen wird.
• merge und include — reduzieren die Tiefe der View-Hierarchie, was die Anzahl der Renderdurchläufe verringert.
• Flache Buffer — Ersetzen verschachtelter Layouts durch ein einzelnes ConstraintLayout oder RelativeLayout.

Unter iOS wird die Optimierung durch CALayer-Konfiguration erreicht: Das Setzen von masksToBounds = true beschneidet Inhalte außerhalb der Layer-Grenzen, und shouldRasterize aktiviert das Bitmap-Caching für statische Layer.

Codebeispiele: Overdraw in Android und iOS beseitigen

Sehen wir uns praktische Beispiele in Kotlin und Swift an, die typische Szenarien zur Overdraw-Beseitigung zeigen. Das erste Beispiel zeigt die Optimierung durch ClipRect unter 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()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

Das zweite Beispiel in Swift zeigt, wie die Transparenz für einen Layer deaktiviert wird, wenn das Element nicht halbtransparent sein soll:

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

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

Das dritte Beispiel demonstriert die Verwendung von ViewStub für das verzögerte Laden einer Karte unter Android. ViewStub rendert erst, wenn es sichtbar wird, wodurch Overdraw in der Bildschirminitialisierungsphase eliminiert wird:

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

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()