Memeriksa overdraw dan kecepatan rendering GPU

Android menyertakan beberapa opsi developer di perangkat yang membantu Anda memvisualisasikan di mana aplikasi Anda mungkin mengalami masalah saat merender UI-nya, misalnya saat melakukan lebih banyak pekerjaan rendering daripada yang diperlukan, atau mengeksekusi thread yang panjang dan operasi GPU. Halaman ini menjelaskan cara men-debug overdraw GPU dan membuat profil rendering GPU.

Untuk mempelajari opsi developer di perangkat lebih lanjut termasuk cara mengaktifkannya, baca Mengonfigurasi opsi developer di perangkat.

Kecepatan Profile GPU Rendering

Fitur Profile GPU Rendering menampilkan histogram scroll, sebuah representasi visual dari waktu yang diperlukannya untuk merender frame jendela UI dengan patokan benchmark 16 md per frame.

Pada GPU yang kurang bertenaga, rasio pengisian yang tersedia (kecepatan GPU mengisi buffer frame) boleh jadi sangat rendah. Seiring bertambahnya jumlah piksel yang diperlukan untuk menggambar frame, GPU mungkin memerlukan waktu lebih lama untuk memproses perintah baru, dan meminta sistem untuk menunggu hingga prosesnya selesai. Fitur pembuatan profil ini membantu Anda mengidentifikasi kapan GPU menjadi kewalahan saat mencoba menggambar piksel atau terbebani oleh overdraw yang berat.

Mengaktifkan profiler

Sebelum memulai, pastikan Anda menggunakan perangkat yang menjalankan Android 4.1 (API level16) atau lebih tinggi, dan mengaktifkan opsi developer. Untuk memulai pembuatan profil rendering GPU perangkat saat menggunakan aplikasi Anda, lakukan hal berikut:

  1. Di perangkat, buka Settings lalu ketuk Developer Options.
  2. Di bagian Monitoring, pilih Profile GPU Rendering.
  3. Dalam dialog Profile GPU Rendering, pilih On screen as bars untuk menghamparkan grafik di layar perangkat Anda.
  4. Buka aplikasi yang ingin dibuat profilnya.

Memeriksa output

Dalam gambar grafik Profile GPU Rendering yang diperbesar seperti dalam gambar 1, Anda dapat melihat bagian yang diberi warna, seperti yang ditampilkan pada Android 6.0 (API level 23).

Gambar 1. Grafik Profile GPU Rendering yang diperbesar.

Berikut adalah beberapa hal yang perlu diperhatikan tentang outputnya:

  • Untuk setiap aplikasi yang terlihat, fitur akan menampilkan sebuah grafik.
  • Setiap batang vertikal di sepanjang sumbu horizontal menyatakan sebuah frame, dan tinggi setiap batang vertikal menyatakan jumlah waktu yang dibutuhkan untuk merender frame (dalam milidetik).
  • Garis hijau horizontal menyatakan 16 milidetik. Untuk mencapai 60 frame per detik, batang vertikal untuk setiap frame harus tetap berada di bawah garis ini. Ketika sebuah batang melewati garis ini, akan ada jeda dalam animasi.
  • Fitur akan menyoroti frame yang melebihi ambang batas 16 milidetik dengan membuat batang yang bersangkutan menjadi lebih lebar dan kurang transparan.
  • Setiap batang memiliki komponen berwarna yang memetakan ke suatu tahapan dalam pipeline rendering. Jumlah komponen bervariasi, bergantung level API perangkat.

Tabel berikut ini menyediakan keterangan setiap segmen batang vertikal dalam output profiler saat menggunakan perangkat yang menjalankan Android 6.0 dan yang lebih tinggi.

Komponen BatangTahap RenderingDeskripsi
Buffer Pertukaran Menyatakan waktu yang digunakan CPU untuk menunggu GPU menyelesaikan pekerjaannya. Jika batang ini menjadi lebih tinggi, artinya aplikasi melakukan terlalu banyak pekerjaan di GPU.
Pengeluaran Perintah Menyatakan waktu yang dihabiskan oleh perender 2D Android untuk mengeluarkan perintah ke OpenGL untuk menggambar dan menggambar ulang daftar tampilan. Tinggi batang ini sebanding dengan jumlah waktu yang diperlukan untuk mengeksekusi setiap daftar tampilan; semakin banyak daftar tampilan, semakin tinggi batang berwarna merah.
Sinkronisasi & Upload Menyatakan waktu yang dibutuhkan untuk mengupload informasi bitmap ke GPU. Segmen besar menunjukkan bahwa aplikasi membutuhkan waktu yang cukup lama untuk memuat grafik dalam jumlah besar.
Gambar Menyatakan waktu yang digunakan untuk membuat dan memperbarui daftar tampilan suatu tampilan. Jika sebagian batang ini tinggi, kemungkinan ada banyak penggambaran tampilan khusus, atau banyak pekerjaan yang dilakukan dalam metode onDraw.
Mengukur / Tata Letak Menyatakan jumlah waktu yang dihabiskan pada callback onLayout dan onMeasure dalam hierarki tampilan. Segmen yang besar menunjukkan bahwa hierarki tampilan membutuhkan banyak waktu untuk memproses.
Animasi Menyatakan waktu yang diperlukan untuk mengevaluasi semua animator yang menjalankan frame tersebut. Jika segmen ini berukuran besar, aplikasi Anda mungkin menggunakan animator khusus yang tidak berfungsi dengan baik atau terjadi beberapa pekerjaan yang tidak diinginkan akibat properti yang diperbarui.
Penanganan Input Menyatakan waktu yang dihabiskan aplikasi untuk mengeksekusi kode dalam callback peristiwa input. Jika segmen ini berukuran besar, artinya aplikasi menghabiskan waktu terlalu lama untuk memproses input pengguna. Pertimbangkan untuk mengalihkan beban pemrosesan ke thread lain.
Waktu Lain-Lain / Penundaan VSync Menyatakan waktu yang dihabiskan aplikasi untuk mengeksekusi operasi di antara dua frame berturut-turut. Hal ini dapat menjadi indikator atas terlalu banyaknya pemrosesan yang terjadi di thread UI yang dapat dialihkan bebannya ke thread lain.

Tabel 1. Batang komponen di Android 6.0 dan yang lebih tinggi.

Versi-versi Android antara 4.0 (API level 14) dan 5.0 (API level 21) memiliki segmen berwarna biru, ungu, merah, dan oranye. Versi Android di bawah 4.0 hanya memiliki komponen berwarna biru, merah, dan oranye. Tabel berikut ini menampilkan batang komponen di Android 4.0 dan 5.0.

Komponen BatangTahap RenderingDeskripsi
Proses Menyatakan waktu yang digunakan CPU untuk menunggu GPU menyelesaikan pekerjaannya. Jika batang ini menjadi lebih tinggi, artinya aplikasi melakukan terlalu banyak pekerjaan di GPU.
Eksekusi Menyatakan waktu yang dihabiskan oleh perender 2D Android untuk mengeluarkan perintah ke OpenGL untuk menggambar dan menggambar ulang daftar tampilan. Tinggi batang ini sebanding dengan jumlah waktu yang diperlukan untuk mengeksekusi setiap daftar tampilan; semakin banyak daftar tampilan, semakin tinggi batang berwarna merah.
XFer Menyatakan waktu yang dibutuhkan untuk mengupload informasi bitmap ke GPU. Segmen besar menunjukkan bahwa aplikasi membutuhkan waktu yang cukup lama untuk memuat grafik dalam jumlah besar. Segmen ini tidak dapat dilihat di perangkat yang menjalankan Android 4.0 ke bawah.
Update Menyatakan waktu yang digunakan untuk membuat dan memperbarui daftar tampilan suatu tampilan. Jika sebagian batang ini tinggi, kemungkinan ada banyak penggambaran tampilan khusus, atau banyak pekerjaan yang dilakukan dalam metode onDraw.

Tabel 2. Batang komponen di Android 4.0 dan 5.0.

Untuk informasi selengkapnya tentang cara menafsirkan informasi yang disediakan oleh fitur pembuatan profil, baca Menganalisis dengan Profile GPU Rendering.

Catatan: Meskipun fitur ini dinamakan Profile GPU Rendering, semua proses pemantauan terjadi di CPU. Rendering terjadi dengan mengirimkan perintah ke GPU, dan GPU merender layar secara tidak bersamaan. Dalam situasi tertentu, GPU mungkin memiliki terlalu banyak pekerjaan untuk dilakukan, dan CPU harus menunggu sebelum dapat mengirimkan perintah baru. Jika hal ini terjadi, Anda akan melihat lonjakan di batang oranye dan merah, dan pengiriman perintah akan terblokir hingga tersedia lebih banyak ruang di antrean perintah GPU.

Memvisualkan overdraw GPU

Fitur lainnya dalam opsi developer membantu Anda mengidentifikasi overdraw dengan memberikan kode warna pada UI. Overdraw terjadi jika aplikasi menggambar piksel yang sama lebih dari satu kali dalam frame yang sama. Jadi, visualisasi ini menunjukkan lokasi aplikasi Anda mungkin melakukan pekerjaan lebih banyak daripada yang diperlukan, yang dapat menyebabkan masalah performa akibat upaya ekstra GPU untuk merender piksel yang tidak akan terlihat oleh pengguna. Oleh karena itu, Anda harus memperbaiki peristiwa overdraw jika memungkinkan.

Jika Anda belum melakukannya, aktifkan opsi developer. Kemudian, untuk memvisualkan overdraw di perangkat, lakukan seperti berikut:

  1. Di perangkat, buka Settings dan ketuk Developer Options .
  2. Scroll ke bawah ke bagian Hardware accelerated rendering, lalu pilih Debug GPU Overdraw.
  3. Dalam dialog Debug GPU overdraw, pilih Show overdraw areas.

Android mewarnai elemen UI untuk mengidentifikasi jumlah overdraw seperti berikut:

  • Warna dasar: Tidak ada overdraw
  • Biru: Overdraw 1 kali
  • Hijau: Overdraw 2 kali
  • Merah Muda: Overdraw 3 kali
  • Merah: Overdraw 4 kali atau lebih

Gambar 2. Aplikasi saat terlihat normal (kiri), dan saat mengaktifkan GPU Overdraw (kanan)

Perhatikan bahwa warna-warna ini semi-transparan, jadi warna sebenarnya yang Anda lihat di layar bergantung pada konten UI Anda.

Karena Anda kini bisa mengenali tempat terjadinya overdraw di tata letak, baca cara mengurangi overdraw.

Ingat bahwa sebagian overdraw tidak dapat dihindari. Saat merapikan antarmuka pengguna aplikasi Anda, cobalah mampir ke visualisasi yang kebanyakan menampilkan warna dasar, atau hanya 1X overdraw (biru).

Gambar 3. Contoh aplikasi dengan banyak overdraw (kiri) dan sedikit overdraw (kanan)