移动应用中的Overdraw：概念、原因与优化

移动图形中的Overdraw是什么？

Overdraw — 是指同一个屏幕像素在一个渲染帧内被多次重绘的情况。在理想情况下，每个像素应该只被写入一次，但在实际界面中，由于嵌套的View、背景图像和透明层，GPU会执行重复写入。

每次额外的重绘都会增加帧渲染时间。在标准60 FPS频率下，处理一帧大约需要16.6毫秒。如果overdraw导致超出此限制，帧率将降至30 FPS或更低，从而明显降低界面的流畅度。

根据Google的Android Performance Patterns，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可能达到5倍或更高。

过度重绘的主要原因

多层背景 — 移动应用中overdraw的主要原因之一。当Activity或ViewController设置背景颜色时，每个嵌套的View可以添加自己的背景，像素在层次结构的每个级别都被重绘。

Uber Engineering的研究表明，在其Android应用中移除多余的背景将overdraw减少了32%，屏幕渲染时间减少了25%。iOS中情况类似：为不透明的View设置opaque = true可消除alpha混合并防止像素的多次写入。

• 透明叠加层 — 带有alpha通道的元素在其他元素之上总是会导致overdraw。
• ClipChildren=false — 禁用子元素裁剪会导致不可见区域的渲染。
• 使用ShapeDrawable代替简单颜色会增加片段着色器的负载。
• 过度嵌套 — View层次结构的每个级别都添加一个潜在的重绘层。

在iOS平台上，overdraw通常是由于使用透明的UIStackView、带有shouldRasterize的CALayer以及重叠的UIBlurEffect而产生的。Apple建议通过XCode中的Core Animation工具检查overdraw——它会以红色叠加层的形式显示重绘区域。

如何诊断Overdraw：工具和方法

Debug GPU Overdraw — Android内置工具，根据overdraw的倍数将屏幕染成不同颜色。紫色表示1x，蓝色—2x，绿色—3x，粉色—4x，红色—5x及以上。理想的屏幕应该是主要呈紫色。

在iOS中，类似的诊断由XCode Instruments中的Core Animation工具执行。它可视化重绘区域，并在Color Blended Layers模式下显示每个像素的准确写入次数。绿色层—不透明（最佳），红色—包含透明度并导致overdraw。

• Profile GPU Rendering 在Android中显示渲染时间的直方图。高的绿色柱状图表明存在overdraw问题。
• Renderscript — 在Android 10+设备上分析渲染管线的更高级工具。
• Metal Debugger 在XCode中允许分析每次渲染pass并查看片段着色器调用的准确次数。

诊断后，测量优化前后的FPS很重要。修复overdraw时10–15 FPS的差异对于具有列表和动画的复杂屏幕来说是正常结果。

移动应用中Overdraw的优化技术

移除多余背景 — 最简单有效的方法。在Android中，只需为Activity或主题设置android:windowBackground，而不是为每个View设置。在iOS中，为所有不透明的UIView设置opaque = true可将这些元素的overdraw几乎降至零。

根据Google I/O 2019，Google Maps中的overdraw优化通过合并图层和使用ClipRect限制绘制区域，将帧渲染时间减少了40%。Google为Android开发者推荐以下实践：

• ClipRect — 限制Canvas的绘制区域。如果可见区域之外没有任何内容—GPU不会浪费资源。
• ViewStub — 用于很少使用或加载时不可见的元素。组件仅在调用inflate时渲染。
• merge 和 include — 减少View层次结构的深度，从而降低渲染pass的数量。
• Flat buffers — 用单个ConstraintLayout或RelativeLayout替换嵌套的Layout。

在iOS中，优化通过配置CALayer实现：设置masksToBounds = true可裁剪图层边界之外的内容，shouldRasterize则为静态图层启用光栅表示的缓存。

代码示例：在Android和iOS中消除Overdraw

让我们看看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()