Mode gambar berkelanjutan untuk pembuatan profil gambar kini tersedia di Chrome Canary. Artikel ini menjelaskan cara mengidentifikasi masalah dalam waktu rendering halaman dan cara Anda dapat menggunakan alat baru ini untuk mendeteksi bottleneck dalam performa rendering.
Menyelidiki waktu rendering di halaman Anda
Jadi, Anda melihat bahwa halaman tidak di-scroll dengan lancar. Inilah cara Anda mulai mengatasi masalah. Untuk contoh ini, kita akan menggunakan halaman demo Things We Left On The Moon oleh Dan Cederholm sebagai contoh.
Anda membuka Web Inspector, memulai perekaman Linimasa, dan men-scroll halaman ke atas dan ke bawah. Kemudian, Anda melihat linimasa vertikal, yang menunjukkan apa yang terjadi di setiap frame.
Jika Anda melihat bahwa sebagian besar waktu dihabiskan untuk menggambar (batang hijau besar di atas 60 fps), Anda harus melihat lebih dekat penyebab hal ini terjadi. Untuk menyelidiki cat, gunakan setelan Tampilkan persegi panjang cat di Web Inspector (ikon roda gigi di sudut kanan bawah Web Inspector). Tindakan ini akan menampilkan wilayah tempat Chrome melukis.
Ada berbagai alasan Chrome untuk mewarnai ulang area halaman:
- Node DOM diubah di JavaScript, yang menyebabkan Chrome menghitung ulang tata letak halaman.
- Animasi sedang diputar dan diperbarui dalam siklus berbasis frame.
- Interaksi pengguna, seperti mengarahkan kursor, menyebabkan perubahan gaya pada elemen tertentu.
- Operasi lain yang menyebabkan tata letak halaman berubah.
Sebagai developer, Anda perlu mengetahui proses repaint yang terjadi di halaman.
Melihat persegi panjang cat adalah cara yang bagus untuk melakukannya. Pada contoh
screenshot di atas, Anda dapat melihat bahwa seluruh layar ditutupi dengan persegi panjang
cat besar. Artinya, seluruh layar akan dicat ulang saat Anda men-scroll, yang tidak
baik. Dalam kasus khusus ini, hal ini disebabkan oleh gaya CSS
background-attachment:fixed yang menyebabkan gambar latar halaman
tetap berada di posisi yang sama saat konten halaman bergerak di atasnya saat
Anda men-scroll.
Jika Anda mengidentifikasi bahwa proses repaint mencakup area yang besar dan/atau memerlukan waktu lama, Anda memiliki dua opsi:
- Anda dapat mencoba mengubah tata letak halaman untuk mengurangi jumlah proses menggambar. Jika memungkinkan, Chrome akan merender halaman yang terlihat hanya sekali dan menambahkan bagian yang belum terlihat saat Anda men-scroll ke bawah. Namun, ada kalanya Chrome perlu mengecat ulang area tertentu. Misalnya, aturan CSS
position:fixed, yang sering digunakan untuk elemen navigasi yang tetap berada di posisi yang sama, dapat menyebabkan proses pengecatan ulang ini. - Jika ingin mempertahankan tata letak halaman, Anda dapat mencoba mengurangi biaya pengecatan area yang akan dicat ulang. Tidak semua gaya CSS memiliki biaya gambar yang sama, beberapa memiliki sedikit dampak, sementara yang lain memiliki banyak dampak. Mencari tahu biaya lukisan gaya tertentu bisa jadi pekerjaan yang berat. Anda dapat melakukannya dengan mengalihkan gaya di panel Elemen dan melihat perbedaan dalam rekaman Linimasa, yang berarti beralih antarpanel dan melakukan banyak rekaman. Di sinilah mode gambar berkelanjutan berperan.
Mode lukisan berkelanjutan
Mode gambar berkelanjutan adalah alat yang membantu Anda mengidentifikasi elemen mana yang mahal di halaman. Tindakan ini akan menempatkan halaman ke dalam status selalu dicat ulang, yang menampilkan penghitung jumlah pekerjaan pengecatan yang terjadi. Kemudian, Anda dapat menyembunyikan elemen dan mengubah gaya, dengan memantau penghitung, untuk mengetahui apa yang lambat.
Penyiapan
Untuk menggunakan mode gambar berkelanjutan, Anda harus menggunakan Chrome Canary.
Di sistem Linux (dan beberapa Mac), Anda harus memastikan bahwa Chrome berjalan dalam
mode komposisi. Ini dapat diaktifkan secara permanen menggunakan setelan Komposisi GPU di semua halaman di about:flags.
Cara Memulai
Mode gambar berkelanjutan dapat diaktifkan melalui kotak centang Aktifkan pengecatan ulang halaman berkelanjutan di setelan Web Inspector (ikon roda gigi di pojok kanan bawah Web Inspector).
Layar kecil di sudut kanan atas menunjukkan waktu proses gambar yang diukur dalam milidetik. Lebih spesifiknya, laporan ini menampilkan:
- Waktu render terakhir yang diukur di sebelah kiri.
- Nilai minimum dan maksimum grafik saat ini di sebelah kanan.
- Diagram batang yang menampilkan histori 80 frame terakhir di bagian bawah (garis dalam diagram menunjukkan 16 md sebagai titik referensi).
Pengukuran waktu proses bergantung pada resolusi layar, ukuran jendela, dan hardware tempat Chrome berjalan. Perhatikan bahwa hal-hal ini kemungkinan akan berbeda untuk pengguna Anda.
Alur kerja
Berikut cara menggunakan mode gambar berkelanjutan untuk melacak elemen dan gaya yang menambahkan banyak biaya gambar:
- Buka setelan Web Inspector dan centang Aktifkan pengecatan ulang halaman berkelanjutan.
- Buka panel Elemen dan jelajahi hierarki DOM dengan tombol panah atau dengan memilih elemen di halaman.
- Gunakan pintasan keyboard H, yaitu bantuan yang baru diperkenalkan, untuk mengalihkan visibilitas pada elemen.
- Lihat grafik waktu gambar dan coba temukan elemen yang menambahkan banyak waktu gambar.
- Lihat gaya CSS elemen tersebut, aktifkan dan nonaktifkan gaya tersebut sambil melihat grafik, untuk menemukan gaya yang menyebabkan penurunan performa.
- Ubah gaya ini dan lakukan perekaman Linimasa lain untuk memeriksa apakah hal ini membuat performa halaman Anda lebih baik.
Animasi di bawah menunjukkan gaya tombol dan pengaruhnya terhadap waktu proses gambar:
Contoh ini menunjukkan cara menonaktifkan salah satu gaya CSS box-shadow
atau border-radius, yang akan mengurangi waktu pengecatan secara signifikan. Menggunakan box-shadow dan border-radius pada elemen akan menyebabkan operasi
proses gambar yang sangat mahal, karena Chrome tidak dapat mengoptimalkannya. Jadi, jika Anda memiliki elemen
yang mendapatkan banyak proses repaint, seperti dalam contoh, Anda harus menghindari
kombinasi ini.
Catatan
Mode gambar berkelanjutan akan mengecat ulang seluruh halaman yang terlihat. Hal ini biasanya tidak terjadi saat menjelajahi halaman web. Scrolling biasanya hanya mewarnai bagian yang belum terlihat sebelumnya. Dan untuk perubahan lain di halaman, hanya area terkecil yang akan dicat ulang. Jadi, periksa dengan rekaman Linimasa lain apakah peningkatan gaya Anda benar-benar berdampak pada waktu render halaman.
Saat menggunakan continuous painting mode, Anda mungkin menemukan bahwa misalnya gaya CSS
border-radius dan box-shadow menambahkan banyak waktu untuk proses menggambar. Anda tidak
perlu ragu untuk menggunakan fitur tersebut secara umum. Fitur tersebut sangat bagus dan kami senang
fitur tersebut akhirnya hadir. Namun, penting untuk mengetahui kapan dan di mana harus menggunakannya.
Hindari menggunakannya di area yang banyak dicat ulang dan hindari menggunakannya secara berlebihan
secara umum.
Demo Langsung
Klik di bawah untuk melihat demo saat Paul Irish menggunakan proses menggambar berkelanjutan untuk mengidentifikasi operasi proses menggambar yang unik dan mahal.