Overdraw در برنامه‌های موبایل: چیست، علل و بهینه‌سازی

Overdraw در گرافیک موبایل چیست؟

Overdraw — وضعیتی است که در آن یک پیکسل صفحه چندین بار در طول یک فریم رندر بازترسیم می‌شود. در سناریوی ایده‌آل، هر پیکسل باید دقیقاً یک بار نوشته شود، اما در رابط‌های واقعی به دلیل Viewهای تو در تو، تصاویر پس‌زمینه و لایه‌های شفاف، GPU نوشتن‌های تکراری انجام می‌دهد.

هر بازترسیم اضافی زمان رندر فریم را افزایش می‌دهد. در نرخ استاندارد ۶۰ FPS، حدود ۱۶.۶ میلی‌ثانیه برای پردازش یک فریم اختصاص داده می‌شود. اگر overdraw منجر به تجاوز از این حد شود، نرخ فریم به ۳۰ FPS یا کمتر کاهش می‌یابد که روان بودن رابط را به طور محسوس بدتر می‌کند.

به گفته Android Performance Patterns از Google، برنامه‌ای با ضریب overdraw ۳x سه برابر بیشتر از برنامه‌ای با overdraw ۱x زمان صرف شیدر قطعه‌ای می‌کند. در دستگاه‌های با عملکرد پایین GPU، این امر منجر به لگ‌های قابل توجه در هنگام اسکرول و انیمیشن می‌شود.

برای توسعه‌دهندگان موبایل، درک overdraw حیاتی است: دقیقاً همین عامل اغلب باعث اسکرول ناهموار و نرخ فریم پایین در صفحه‌هایی می‌شود که به ظاهر ساده به نظر می‌رسند اما عناصر تو در توی زیادی دارند.

چگونه Overdraw بر عملکرد GPU تأثیر می‌گذارد

خط لوله GPU از چند مرحله تشکیل شده است: شیدر رأس، رسترسازی و شیدر قطعه‌ای. شیدر قطعه‌ای — پرهزینه‌ترین بخش است، زیرا برای هر پیکسل از هر primitif اجرا می‌شود. در overdraw x2، شیدر قطعه‌ای دو برابر پیکسل‌های بیشتری پردازش می‌کند که مستقیماً زمان فریم را افزایش می‌دهد.

GPUهای مدرن موبایل مانند Qualcomm Adreno و Apple GPU دارای مکانیسم‌های Early-Z Test و Hidden Surface Removal هستند که تا حدی overdraw را جبران می‌کنند. با این حال، این بهینه‌سازی‌ها فقط در شرایط خاصی کار می‌کنند و نباید صرفاً به شتاب سخت‌افزاری تکیه کرد.

به عنوان مثال، هنگام رندر عناصر نیمه‌شفاف، Early-Z سخت‌افزاری مؤثر نیست و هر پیکسل به طور کامل پردازش می‌شود — overdraw در چنین سناریوهایی می‌تواند به ۵x و بیشتر برسد.

علل اصلی بازترسیم بیش از حد

پس‌زمینه‌های چندلایه — یکی از علل اصلی overdraw در برنامه‌های موبایل. وقتی Activity یا ViewController یک رنگ پس‌زمینه تنظیم می‌کند، هر View تو در تو می‌تواند پس‌زمینه خود را اضافه کند و پیکسل در هر سطح از سلسله‌مراتب بازترسیم می‌شود.

تحقیق Uber Engineering نشان داد که حذف پس‌زمینه‌های اضافی در برنامه Android خود، overdraw را ۳۲٪ و زمان رندر صفحه را ۲۵٪ کاهش داد. وضعیت مشابهی در iOS: تنظیم opaque = true برای Viewهای غیرشفاف، ترکیب آلفا را حذف کرده و از نوشتن چندباره پیکسل‌ها جلوگیری می‌کند.

• روکش‌های شفاف — عناصر با کانال آلفا بالای عناصر دیگر همیشه باعث overdraw می‌شوند.
• ClipChildren=false — غیرفعال کردن برش عناصر فرزند منجر به رندر مناطق نامرئی می‌شود.
• استفاده از ShapeDrawable به جای رنگ‌های ساده بار شیدر قطعه‌ای را افزایش می‌دهد.
• تو در توی بیش از حد — هر سطح از سلسله‌مراتب View یک لایه بالقوه بازترسیم اضافه می‌کند.

در پلتفرم iOS، overdraw اغلب به دلیل استفاده از UIStackView شفاف، CALayer با shouldRasterize و UIBlurEffectهای هم‌پوشان ایجاد می‌شود. Apple توصیه می‌کند overdraw را از طریق ابزار Core Animation در XCode بررسی کنید — مناطق بازترسیم را به صورت یک لایه قرمز نشان می‌دهد.

چگونه Overdraw را تشخیص دهیم: ابزارها و روش‌ها

Debug GPU Overdraw — ابزار داخلی اندروید که صفحه را بسته به تعدد overdraw به رنگ‌های مختلف درمی‌آورد. رنگ بنفش به معنای ۱x، آبی — ۲x، سبز — ۳x، صورتی — ۴x، قرمز — ۵x و بیشتر است. صفحه ایده‌آل باید عمدتاً بنفش باشد.

در iOS، تشخیص مشابه توسط ابزار Core Animation در مجموعه XCode Instruments انجام می‌شود. مناطق بازترسیم را تجسم کرده و تعداد دقیق نوشته‌ها در هر پیکسل را در حالت Color Blended Layers نشان می‌دهد. لایه‌های سبز — غیرشفاف (بهینه)، قرمز — حاوی شفافیت هستند و باعث overdraw می‌شوند.

• Profile GPU Rendering در اندروید هیستوگرام زمان رندر را نشان می‌دهد. ستون‌های سبز بلند نشان‌دهنده مشکلات overdraw هستند.
• Renderscript — ابزار پیشرفته‌تر برای تحلیل خط لوله رندر در دستگاه‌های Android 10+.
• Metal Debugger در XCode امکان تحلیل هر گذر رندر و دیدن تعداد دقیق فراخوانی‌های شیدر قطعه‌ای را فراهم می‌کند.

پس از تشخیص، اندازه‌گیری FPS قبل و بعد از بهینه‌سازی مهم است. تفاوت ۱۰–۱۵ FPS هنگام اصلاح overdraw نتیجه معمولی برای یک صفحه پیچیده با لیست‌ها و انیمیشن است.

تکنیک‌های بهینه‌سازی Overdraw در برنامه‌های موبایل

حذف پس‌زمینه‌های اضافی — ساده‌ترین و مؤثرترین روش. در اندروید کافی است android:windowBackground را فقط برای Activity یا تم تنظیم کنید، نه برای هر View. در iOS opaque = true برای همه UIViewهای غیرشفاف overdraw را برای این عناصر عملاً به صفر می‌رساند.

به گفته Google I/O 2019، بهینه‌سازی overdraw در Google Maps زمان رندر فریم را با ترکیب لایه‌ها و استفاده از ClipRect برای محدود کردن منطقه ترسیم، ۴۰٪ کاهش داد. Google توصیه‌های زیر را برای توسعه‌دهندگان اندروید ارائه می‌دهد:

• 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 در اندروید را نشان می‌دهد:

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 برای بارگذاری تأخیری نقشه در اندروید. 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()