Mode lukisan berkelanjutan untuk pembuatan profil paint 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 mengecat di halaman Anda
Jadi, Anda memperhatikan bahwa halaman Anda tidak dapat di-scroll dengan lancar. Begitulah cara Anda akan mulai mengatasi masalah. Untuk contoh, 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 mengecat (bilah hijau besar di atas 60 fps), Anda harus melihat lebih lanjut penyebab masalah ini. Untuk menyelidiki paint Anda, gunakan setelan Show paint rectangles dari Web Inspector (ikon roda gigi di sudut kanan bawah Web Inspector). Langkah ini akan menunjukkan wilayah tempat Chrome melukis.
Ada berbagai alasan mengapa Chrome perlu mengecat ulang area halaman:
- Node DOM berubah di JavaScript, yang menyebabkan Chrome menghitung ulang tata letak halaman.
- Animasi sedang diputar yang 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 harus mengetahui pengecatan ulang 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 tertutup dalam persegi panjang
cat besar. Artinya, seluruh layar akan digambar ulang saat Anda men-scroll, dan hal ini
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 pengecatan ulang mencakup area yang luas dan/atau memakan waktu lama, Anda memiliki dua opsi:
- Anda dapat mencoba mengubah tata letak laman untuk mengurangi jumlah gambar. Jika memungkinkan, Chrome hanya akan menggambar halaman yang terlihat 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 penggambaran ulang ini. - Jika Anda ingin mempertahankan tata letak laman, Anda dapat mencoba mengurangi biaya pengecatan area yang akan dicat ulang. Tidak semua gaya CSS memiliki biaya penggambaran yang sama, beberapa memiliki dampak kecil, yang lainnya banyak. Mengetahui biaya pengecatan gaya tertentu bisa menjadi banyak pekerjaan. Anda dapat melakukannya dengan mengganti-ganti gaya di panel Elements dan melihat perbedaan pada perekaman Linimasa, yang berarti beralih antarpanel dan melakukan banyak perekaman. Di sinilah mode lukisan kontinu akan berperan.
Mode lukisan berkelanjutan
Mode lukisan berkelanjutan adalah alat yang membantu Anda mengidentifikasi elemen mana yang berbiaya mahal di halaman. Ini menempatkan halaman dalam status selalu pengecatan ulang, menunjukkan penghitung jumlah pekerjaan melukis yang terjadi. Kemudian, Anda dapat menyembunyikan elemen dan mengubah gaya, mengamati penghitung, untuk mengetahui apa yang lambat.
Penyiapan
Untuk menggunakan mode lukisan berkelanjutan, Anda harus menggunakan Chrome Canary.
Pada sistem Linux (dan beberapa Mac), Anda perlu memastikan bahwa Chrome berjalan dalam
mode komposisi. Fitur ini dapat diaktifkan secara permanen menggunakan setelan Pengomposisian GPU pada semua halaman di about:flags.
Cara Memulai
Mode lukisan berkelanjutan dapat diaktifkan melalui kotak centang Aktifkan pengecatan ulang halaman berkelanjutan di setelan Web Inspector (ikon roda gigi di sudut kanan bawah Web Inspector).
Layar kecil di sudut kanan atas menunjukkan waktu paint yang diukur dalam milidetik. Lebih spesifik lagi, bagian ini menunjukkan:
- Waktu proses pengecatan yang terakhir 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 paint bergantung pada resolusi layar, ukuran jendela, dan hardware yang digunakan Chrome. Sadarilah bahwa hal-hal ini mungkin berbeda bagi pengguna Anda.
Alur kerja
Berikut ini cara menggunakan mode pengecatan berkelanjutan untuk melacak elemen dan gaya yang menimbulkan banyak biaya pengecatan:
- Buka setelan Web Inspector dan centang Enable continuous page repainting.
- Buka panel Elements dan jelajahi hierarki DOM dengan tombol panah atau dengan memilih elemen pada halaman.
- Gunakan pintasan keyboard H, helper yang baru diperkenalkan, untuk mengalihkan visibilitas pada elemen.
- Lihat grafik waktu pengecatan dan coba temukan elemen yang menambah banyak waktu pengecatan.
- Lihat gaya CSS elemen tersebut, alihkan tombol aktif dan nonaktif saat melihat grafik, untuk menemukan gaya yang menyebabkan perlambatan.
- Ubah gaya ini dan lakukan perekaman Linimasa lain untuk memeriksa apakah tindakan ini membuat performa halaman Anda lebih baik.
Animasi di bawah ini menunjukkan gaya peralihan dan pengaruhnya terhadap waktu paint:
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 penggambaran yang sangat mahal
karena Chrome tidak dapat mengoptimalkannya. Jadi, jika Anda memiliki elemen
yang mendapat banyak penggambaran ulang, seperti dalam contoh, Anda harus menghindari
kombinasi ini.
Catatan
Mode lukisan berkelanjutan akan menggambar ulang seluruh halaman yang terlihat. Hal ini biasanya tidak terjadi saat menjelajahi halaman web. {i>Scrolling <i}biasanya hanya mengecat bagian-bagian yang belum terlihat sebelumnya. Dan untuk perubahan lain pada laman itu, hanya area terkecil yang akan digambar ulang. Jadi, periksa dengan pencatatan Linimasa lain, apakah peningkatan gaya Anda benar-benar berdampak pada waktu menggambar di halaman Anda.
Saat menggunakan continuous painting mode, Anda mungkin menemukan bahwa, misalnya, gaya CSS border-radius dan box-shadow menambahkan banyak waktu menggambar. Anda tidak
perlu menggunakan fitur tersebut secara umum, karena fitur-fiturnya luar biasa dan kami senang
akhirnya fitur tersebut tersedia. Tetapi, penting untuk mengetahui kapan
dan di mana menggunakannya.
Hindari menggunakannya di area dengan banyak pengecatan ulang dan hindari menggunakannya secara
berlebihan.
Demo Langsung
Klik di bawah untuk melihat demo mana Paul Irish menggunakan pengecatan berkelanjutan untuk mengidentifikasi operasi cat yang mahal secara unik.