Paint adalah proses pengisian piksel yang pada akhirnya akan disusun 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 Chrome DevTools untuk menilai kompleksitas dan biaya paint; kurangi jika 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 bisa memicu paint jika mengubah properti non-geometris, 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 paket seni seperti Sketch, GIMP, atau Photoshop, di mana setiap layer dapat ditangani dan disusun di atas satu sama 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 meskipun mempromosikan elemen, pekerjaan cat tetap diperlukan. Tantangan besar dari masalah paint adalah browser menyatukan dua area yang perlu dicat, dan itu dapat mengakibatkan seluruh layar dicat 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 cat sering kali menjadi masalah dalam mengorkestrasi animasi dan transisi Anda agar tidak terlalu 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 Anda apakah mungkin untuk menggunakan set gaya yang lebih murah atau sarana 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.