Paint adalah proses pengisian piksel yang pada akhirnya akan dikomposisikan ke layar pengguna. Sering kali ini yang paling lama berjalan dari semua tugas di pipeline, dan harus dihindari jika memungkinkan.
Ringkasan
- Mengubah properti selain transformasi atau opasitas akan selalu memicu paint.
- Paint sering kali merupakan bagian paling mahal dari pipeline piksel. Hindari jika memungkinkan.
- Kurangi area paint melalui promosi layer dan orkestrasi animasi.
- Gunakan paint profiler di Chrome DevTools untuk menilai kompleksitas paint dan biayanya; kurangi bila Anda bisa.
Cara tata letak dan gambar dipicu
Jika memicu tata letak, Anda akan selalu memicu paint, karena mengubah geometri elemen berarti pikselnya perlu diperbaiki.
Anda juga dapat memicu paint jika mengubah properti non-geometrik, seperti latar belakang, warna teks, atau bayangan. Dalam hal ini, tata letak tidak akan diperlukan dan pipeline akan terlihat seperti ini:
Menggunakan Chrome DevTools untuk mengidentifikasi bottleneck paint dengan cepat
Anda dapat menggunakan Chrome DevTools untuk mengidentifikasi dengan cepat area yang akan digambar. Buka tab Rendering, lalu aktifkan Paint Flashing.
Dengan mengaktifkan opsi ini, Chrome akan mengisi layar dengan warna hijau setiap kali terjadi penggambaran. Jika Anda melihat seluruh layar berisi warna hijau, atau area layar yang menurut Anda seharusnya tidak digambar, berarti Anda harus menyelidiki sedikit lebih jauh lagi.
Mempromosikan elemen yang berpindah atau memudar
Penggambaran tidak selalu dilakukan ke dalam satu gambar di memori. Sebenarnya, browser bisa saja menggambar ke dalam beberapa gambar, atau lapisan kompositor, jika perlu.
Manfaat pendekatan ini adalah elemen rutin digambar ulang, atau berpindah pada layar dengan transformasi, bisa ditangani tanpa memengaruhi elemen lain. Ini sama seperti pada paket aplikasi seni seperti Sketch, GIMP atau Photoshop, di mana masing-masing lapisan dapat ditangani dan dikomposisikan di atas lapisan lain untuk membuat gambar akhir.
Cara terbaik untuk membuat lapisan baru adalah menggunakan properti CSS will-change yang tersedia di semua mesin browser modern utama. Dengan menggunakan nilai transform, will-change akan membuat lapisan compositor baru:
.moving-element {
will-change: transform;
}
Berhati-hatilah agar tidak terlalu banyak membuat layer, karena setiap layer memerlukan memori dan manajemen. Ada informasi selengkapnya mengenai hal ini di bagian Berpeganglah pada properti compositor-saja dan kelola jumlah layer.
Jika Anda telah mempromosikan elemen ke lapisan baru, gunakan DevTools untuk mengonfirmasi bahwa melakukan hal itu memberi Anda manfaat performa. Jangan promosikan elemen tanpa pembuatan profil.
Mengurangi area cat
Namun, terkadang walaupun mempromosikan elemen, pekerjaan paint tetap diperlukan. Tantangan besar dalam masalah paint adalah karena browser menyatukan dua area yang memerlukan penggambaran, dan itu bisa mengakibatkan seluruh layar digambar ulang. Jadi, misalnya, jika Anda telah menetapkan header di bagian atas halaman, sesuatu sedang digambar di bagian bawah layar, seluruh layar akhirnya mungkin akan digambar ulang.
Mengurangi area paint sering kali merupakan masalah orkestrasi animasi dan transisi Anda agar tidak banyak tumpang-tindih, atau menemukan cara untuk menghindari animasi bagian halaman tertentu.
Menyederhanakan kompleksitas paint
Dalam hal menggambar, beberapa hal lebih mahal daripada yang lainnya. Misalnya, apa pun yang melibatkan blur (seperti bayangan, misalnya) akan memerlukan waktu lebih lama untuk digambar daripada, misalnya, menggambar kotak merah. Namun, dalam konteks CSS, hal ini tidak selalu jelas: background: red; dan box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); tidak selalu terlihat memiliki karakteristik performa yang sangat berbeda, tetapi kenyataannya berbeda.
Seperti yang ditunjukkan pada screenshot sebelumnya, paint profiler memungkinkan Anda menentukan apakah perlu mencari cara lain untuk menghasilkan efek. Tanyakan pada diri sendiri mungkinkah menggunakan set gaya yang lebih murah atau cara alternatif untuk mendapatkan hasil akhir.
Bila bisa, Anda selalu ingin menghindari paint khususnya selama animasi, karena 10 md yang Anda miliki per bingkai biasanya tidak cukup lama untuk menyelesaikan pekerjaan paint, terutama pada perangkat seluler.