Paint adalah proses pengisian piksel yang pada akhirnya akan dikomposisikan ke pengguna layar. Sering kali ini yang paling lama berjalan dari semua tugas di pipeline, dan harus dihindari jika memungkinkan.
Paint adalah proses pengisian piksel yang pada akhirnya akan disusun menjadi pengguna layar. Seringkali ini yang paling lama berjalan dari semua tugas di {i>pipelines<i}, dan satu lagi yang harus dihindari jika memungkinkan.
Ringkasan
- Mengubah properti apa pun selain transformasi atau opasitas selalu akan memicu paint.
- Paint sering kali menjadi bagian paling mahal dari pipeline piksel; hindarilah sebisa mungkin.
- Kurangi area cat melalui promosi lapisan dan orkestrasi animasi.
- Menggunakan paint profiler di Chrome DevTools untuk menilai kompleksitas dan biaya paint; mengurangi segala sesuatunya sebisa mungkin.
Memicu Layout dan Paint
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 kasus tersebut, 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 berkedip hijau pada layar bila terjadi penggambaran. Jika Anda melihat seluruh layar berkedip hijau, atau area layar yang menurut Anda seharusnya tidak dicat, maka Anda harus menggali lebih jauh.
Promosikan elemen yang bergerak atau pudar
Pengecatan tidak selalu dilakukan ke dalam satu gambar dalam memori. Bahkan, browser bisa melukis menjadi beberapa gambar, atau layer compositor, jika diperlukan.
Manfaat dari pendekatan ini adalah bahwa elemen yang secara teratur dicat ulang, atau bergerak di layar dengan transformasi, dapat ditangani tanpa mempengaruhi 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. Fungsi ini akan berfungsi di Chrome, Opera, dan Firefox, dan, dengan nilai transform, akan membuat lapisan compositor baru:
.moving-element {
will-change: transform;
}
Untuk browser yang tidak mendukung will-change, tetapi mendapatkan manfaat dari pembuatan lapisan, seperti Safari dan Mobile Safari, Anda perlu (salah) menggunakan transformasi 3D untuk memaksa lapisan baru:
.moving-element {
transform: translateZ(0);
}
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.
Kurangi 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 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 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 mengecat, beberapa hal lebih mahal dibandingkan yang lain. Misalnya, apa pun yang melibatkan blur (seperti bayangan, misalnya) akan membutuhkan waktu lebih lama untuk dicat daripada -- katakan -- 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.
Paint profiler di atas akan memungkinkan Anda menentukan apakah Anda perlu mencari cara lain untuk mencapai efek. Tanyakan pada diri Anda apakah mungkin untuk menggunakan set gaya yang lebih murah atau cara alternatif untuk mendapatkan hasil akhir.
Sebaiknya selalu hindari paint selama animasi secara khusus, karena 10 md yang Anda miliki per frame biasanya tidak cukup lama untuk menyelesaikan proses menggambar, terutama di perangkat seluler.