Paint adalah proses pengisian piksel yang pada akhirnya akan disusun menjadi layar pengguna. Seringkali ini yang paling lama berjalan dari semua tugas di pipeline, dan satu yang harus dihindari jika memungkinkan.
Ringkasan
- Mengubah properti selain transformasi atau opasitas akan selalu memicu paint.
- Paint sering kali menjadi bagian paling mahal dari pipeline piksel. Sebaiknya hindari hal ini.
- Kurangi area paint melalui promosi layer dan orkestrasi animasi.
- Menggunakan paint profiler di Chrome DevTools untuk menilai kompleksitas dan biaya paint; mengurangi segala sesuatunya sebisa mungkin.
Cara tata letak dan penggambaran dipicu
Jika memicu tata letak, Anda akan selalu memicu paint, karena mengubah geometri elemen berarti piksel-nya 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 bisa menggunakan Chrome DevTools untuk mengidentifikasi dengan cepat area yang digambar. Membuka 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
Pengecatan tidak selalu dilakukan ke dalam satu gambar dalam 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 membuat terlalu banyak lapisan, karena setiap lapisan memerlukan memori dan manajemen. Informasi selengkapnya tentang hal ini tersedia di bagian Tetap gunakan properti khusus compositor dan kelola jumlah lapisan.
Jika Anda telah mempromosikan elemen ke layer 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 dalam masalah paint adalah karena browser menyatukan dua area yang memerlukan penggambaran, dan itu bisa mengakibatkan seluruh layar digambar ulang. Jadi, misalnya, jika Anda memiliki {i>header<i} tetap di bagian atas halaman, dan ada yang dicat di bagian bawah layar, seluruh layar 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 hal 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 sebenarnya 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.