Mode pengecatan berkelanjutan untuk pembuatan profil cat kini tersedia di Chrome Canary. Artikel ini menjelaskan cara mengidentifikasi masalah dalam waktu menggambar halaman dan cara menggunakan alat baru ini untuk mendeteksi bottleneck dalam performa proses menggambar.
Menyelidiki waktu pengecatan di halaman Anda
Jadi, Anda mendapati bahwa halaman tidak di-scroll dengan lancar. Beginilah cara Anda akan 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, lalu 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 melukis (batang hijau besar di atas 60 fps), Anda perlu melihat lebih dekat mengapa hal ini terjadi. Untuk menyelidiki cat Anda, gunakan setelan Show paint rectangles pada Web Inspector (ikon roda gigi di sudut kanan bawah Web Inspector). Perintah ini akan menampilkan wilayah tempat cat di Chrome.
Ada berbagai alasan agar Chrome mengecat ulang area halaman:
- Node DOM berubah di JavaScript, yang menyebabkan Chrome menghitung ulang tata letak halaman.
- Animasi sedang diputar dan diupdate 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 tentang pewarnaan ulang yang terjadi di halaman Anda.
Melihat persegi panjang cat adalah cara yang bagus untuk melakukannya. Pada contoh
screenshot di atas, Anda dapat melihat seluruh layar tertutup oleh persegi panjang
cat besar. Artinya, seluruh layar diwarnai ulang saat Anda men-scroll, dan ini tidak
baik. Dalam kasus khusus ini, hal ini disebabkan oleh gaya CSS background-attachment:fixed yang menyebabkan gambar latar halaman tetap di posisi yang sama saat konten halaman bergerak di atasnya saat Anda men-scroll.
Jika Anda mengidentifikasi bahwa penggambaran ulang mencakup area yang besar dan/atau memakan waktu lama, Anda memiliki dua opsi:
- Anda dapat mencoba mengubah tata letak halaman untuk mengurangi jumlah pengecatan. Jika memungkinkan, Chrome hanya akan menggambar halaman yang terlihat satu kali dan menambahkan bagian yang belum terlihat saat Anda men-scroll ke bawah. Namun, ada kasus saat Chrome perlu melakukan pengecatan ulang ke area tertentu. Misalnya, aturan CSS
position:fixed, yang sering digunakan untuk elemen navigasi yang tetap berada di posisi yang sama, dapat menyebabkan penggambaran ulang ini. - Jika Anda ingin mempertahankan tata letak laman, Anda dapat mencoba mengurangi biaya pengecatan area yang dicat ulang. Tidak semua gaya CSS memiliki biaya pengecatan yang sama, sebagian memiliki pengaruh kecil, sebagian lainnya besar. Mengetahui biaya pengecatan gaya tertentu bisa sangat merepotkan. Anda dapat melakukan ini dengan mengganti gaya di panel Elemen dan melihat perbedaannya dalam perekaman Linimasa, yang berarti beralih di antara panel dan melakukan banyak rekaman. Di sinilah mode lukisan berkelanjutan berperan.
Mode pengecatan berkelanjutan
Mode pengecatan berkelanjutan adalah alat yang membantu Anda mengidentifikasi elemen mana yang mahal di halaman. Ini menempatkan halaman ke dalam status selalu pengecatan ulang, menunjukkan penghitung berapa banyak pekerjaan melukis yang terjadi. Kemudian, Anda dapat menyembunyikan elemen dan mengubah gaya, mengamati penghitung, untuk mencari tahu apa yang lambat.
Penyiapan
Untuk menggunakan mode lukisan berkelanjutan, Anda harus menggunakan Chrome Canary.
Di sistem Linux (dan beberapa Mac), Anda perlu memastikan bahwa Chrome berjalan dalam
mode komposisi. Ini dapat diaktifkan secara permanen menggunakan setelan pengomposisian GPU di semua halaman di about:flags.
Cara Memulai
Mode pengecatan berkelanjutan dapat diaktifkan melalui kotak centang Enable continuous page rePainting di setelan Web Inspector (ikon roda gigi di pojok kanan bawah Web Inspector).
Layar kecil di sudut kanan atas menunjukkan waktu cat yang diukur dalam milidetik. Lebih khususnya, hal ini menampilkan:
- Waktu mengecat yang terakhir diukur di sebelah kiri.
- Nilai minimum dan maksimum grafik saat ini di sebelah kanan.
- Diagram batang menampilkan histori 80 frame terakhir di bagian bawah (garis dalam diagram menunjukkan 16 md sebagai titik referensi).
Pengukuran waktu penggambaran bergantung pada resolusi layar, ukuran jendela, dan hardware yang menjalankan Chrome. Ketahuilah bahwa hal-hal ini mungkin berbeda untuk pengguna Anda.
Alur kerja
Berikut ini cara Anda menggunakan mode pengecatan berkelanjutan untuk melacak elemen dan gaya yang menambah banyak biaya pengecatan:
- Buka setelan Web Inspector dan centang Enable continuous page retouching.
- Buka panel Elements dan jelajahi hierarki DOM menggunakan tombol panah atau dengan memilih elemen pada halaman.
- Gunakan pintasan keyboard H, helper yang baru diperkenalkan, untuk mengaktifkan/menonaktifkan visibilitas pada elemen.
- Lihat grafik waktu pengecatan dan coba temukan elemen yang menambah banyak waktu pengecatan.
- Telusuri gaya CSS elemen tersebut, alihkan aktif dan nonaktif ketika melihat grafik, untuk menemukan gaya yang menyebabkan perlambatan.
- Ubah gaya ini dan lakukan perekaman Linimasa lainnya untuk memeriksa apakah hal ini membuat performa halaman Anda lebih baik.
Animasi di bawah ini menunjukkan peralihan gaya dan pengaruhnya pada waktu pewarnaan:
Contoh ini menunjukkan bagaimana menonaktifkan salah satu gaya CSS box-shadow
atau border-radius, dapat mengurangi waktu penggambaran secara signifikan. Menggunakan box-shadow dan border-radius pada elemen akan menyebabkan operasi pengecatan
yang sangat mahal karena Chrome tidak dapat mengoptimalkannya. Jadi, jika Anda memiliki elemen
yang mendapatkan banyak penggambaran ulang, seperti dalam contoh, Anda harus menghindari
kombinasi ini.
Catatan
Mode pengecatan berkelanjutan melukis ulang seluruh halaman yang terlihat. Ini biasanya tidak terjadi saat menjelajahi laman web. Scrolling biasanya hanya mengecat bagian yang belum terlihat sebelumnya. Dan untuk perubahan lain pada halaman, hanya area terkecil yang akan dicat ulang. Jadi, periksa dengan rekaman Linimasa lain jika peningkatan gaya Anda benar-benar berdampak pada waktu menggambar halaman.
Saat menggunakan continuous painting mode, Anda mungkin mendapati bahwa, misalnya, gaya CSS border-radius dan box-shadow menambahkan banyak waktu menggambar. Anda dapat menggunakan fitur tersebut secara umum karena luar biasa, dan kami senang akhirnya ada di sini. Namun, penting untuk mengetahui kapan dan di mana harus menggunakannya.
Hindari menggunakannya di area dengan banyak penggambaran ulang dan hindari menggunakannya secara
berlebihan secara umum.
Demo Live
Klik di bawah untuk melihat demo di mana Paul Irish menggunakan pengecatan berkelanjutan untuk mengidentifikasi operasi cat yang mahal.