Menyederhanakan kompleksitas cat dan mengurangi area paint

Paint adalah proses pengisian piksel yang pada akhirnya akan dikomposisikan ke layar pengguna. Sering kali ini yang paling lama berjalan dari semua tugas dalam pipeline, dan harus dihindari jika memungkinkan.

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 apa pun selain transformasi atau opasitas akan selalu memicu paint.
  • Paint sering kali menjadi bagian yang paling mahal dari pipeline piksel; hindari bila Anda bisa.
  • Mengurangi area paint melalui promosi layer dan orkestrasi animasi.
  • Gunakan paint profiler di Chrome DevTools untuk menilai kompleksitas paint dan biaya; kurangi jika Anda bisa.

Memicu Layout dan Paint

Jika Anda memicu tata letak, Anda akan selalu memicu paint, karena mengubah geometri elemen apa pun berarti pikselnya perlu diperbaiki.

Pipeline piksel penuh.

Anda juga dapat memicu paint jika mengubah properti non-geometris, seperti latar belakang, warna teks, atau bayangan. Dalam hal itu, tata letak tidak akan diperlukan dan pipeline akan terlihat seperti ini:

Pipeline piksel tanpa tata letak.

Menggunakan Chrome DevTools untuk mengidentifikasi bottleneck paint dengan cepat

Anda dapat menggunakan Chrome DevTools untuk mengidentifikasi dengan cepat area yang sedang digambar. Buka tab Rendering, lalu aktifkan Paint Flashing.

Dengan mengaktifkan opsi ini di Chrome, layar akan berkedip hijau setiap kali proses menggambar terjadi. Jika Anda melihat seluruh layar berkedip hijau, atau area layar yang menurut Anda tidak seharusnya dicat, sebaiknya pelajari lebih lanjut.

Halaman berkedip hijau setiap kali lukisan terjadi.

Promosikan elemen yang berpindah atau memudar

Proses menggambar tidak selalu dilakukan menjadi satu gambar di memori. Bahkan, browser dapat menggambar ke dalam beberapa gambar, atau lapisan compositor, jika perlu.

Representasi lapisan compositor.

Manfaat pendekatan ini adalah elemen yang secara teratur dicat ulang, atau bergerak di layar dengan transformasi, dapat ditangani tanpa memengaruhi elemen lain. Ini sama dengan paket seni seperti Sketch, GIMP, atau Photoshop, di mana setiap layer dapat ditangani dan dikomposisikan di atas satu sama lain untuk membuat gambar akhir.

Cara terbaik untuk membuat lapisan baru adalah dengan menggunakan properti CSS will-change. 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 dapat memanfaatkan pembuatan lapisan, seperti Safari dan Mobile Safari, Anda harus (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 pengelolaan. Ada informasi lebih lanjut mengenai hal ini di bagian Berpegang pada properti compositor saja dan mengelola jumlah lapisan.

Jika Anda telah mempromosikan elemen ke layer baru, gunakan DevTools untuk mengonfirmasi bahwa hal itu memberi Anda manfaat kinerja. Jangan promosikan elemen tanpa pembuatan profil.

Mengurangi area cat

Namun terkadang, meskipun mempromosikan elemen, pekerjaan cat masih diperlukan. Tantangan besar dari masalah paint adalah karena browser menyatukan dua area yang perlu digambar, dan itu bisa mengakibatkan seluruh layar digambar ulang. Jadi, misalnya, jika Anda memiliki header tetap di bagian atas halaman, dan sesuatu sedang digambar di bagian bawah layar, seluruh layar mungkin akan digambar ulang.

Mengurangi area paint sering kali merupakan kasus orkestrasi animasi dan transisi Anda agar tidak banyak tumpang tindih, atau menemukan cara untuk menghindari animasi bagian tertentu pada halaman.

Menyederhanakan kompleksitas paint

Waktu yang dibutuhkan untuk mengecat bagian layar.

Dalam hal melukis, beberapa hal lebih mahal daripada yang lain. Misalnya, apa pun yang melibatkan pemburaman (misalnya, bayangan) akan memakan waktu lebih lama untuk dilukis daripada -- katakanlah -- 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, padahal memang demikian.

Paint profiler di atas akan memungkinkan Anda menentukan apakah Anda perlu melihat cara lain untuk mendapatkan efek. Tanyakan pada diri Anda apakah mungkin menggunakan seperangkat gaya yang lebih murah atau cara alternatif untuk mendapatkan hasil akhir.

Jika Anda bisa, Anda dapat selalu menghindari paint selama animasi, karena 10 md yang Anda miliki per frame biasanya tidak cukup lama untuk menyelesaikan pekerjaan paint, terutama di perangkat seluler.