Berpegang pada Properti Khusus Kompositor dan Kelola Jumlah Lapisan

Komposisi adalah tempat bagian yang digambar pada halaman digabungkan untuk ditampilkan di layar.

Komposisi adalah tempat bagian-bagian laman yang dicatat ditempatkan bersama untuk yang ditampilkan di layar.

Ada dua faktor utama dalam area ini yang mempengaruhi performa halaman: jumlah layer compositor yang perlu dikelola, dan properti yang Anda gunakan untuk animasi.

Ringkasan

  • Tetap berpegang pada perubahan transformasi dan opasitas untuk animasi Anda.
  • Promosikan elemen bergerak dengan will-change atau translateZ.
  • Hindari menggunakan aturan promosi secara berlebihan; {i>layer <i}membutuhkan memori dan manajemen.

Menggunakan perubahan transform dan opasitas untuk animasi

Versi pipeline piksel dengan performa terbaik menghindari layout dan paint, dan hanya memerlukan perubahan komposisi:

Pipeline piksel tanpa layout atau paint.

Untuk mencapai hal ini, Anda harus tetap mengubah properti yang dapat ditangani oleh compositor saja. Saat ini hanya ada dua properti yang benar - transform dan opacity:

Properti yang dapat Anda animasikan tanpa memicu layout atau paint.

Satu hal yang perlu diwaspadai untuk penggunaan transform dan opacity adalah elemen tempat Anda mengubah properti ini harus berada di lapisan compositor-nya sendiri. Untuk membuat {i>layer<i}, Anda harus mempromosikan elemen tersebut, yang akan kita bahas berikutnya.

Promosikan elemen yang rencananya akan dianimasikan

Seperti yang telah kami sebutkan dalam "Menyederhanakan kompleksitas paint dan mengurangi area cat" , Anda harus mempromosikan elemen yang Anda rencanakan untuk dianimasikan (sesuai alasan, jangan berlebihan) ke lapisannya sendiri:

.moving-element {
  will-change: transform;
}

Atau, untuk browser lama, atau yang tidak mendukung will-change:

.moving-element {
  transform: translateZ(0);
}

Kelola lapisan dan hindari ledakan lapisan

Oleh karena itu, mungkin Anda tergoda, mengetahui bahwa lapisan sering kali membantu kinerja, untuk mempromosikan semua elemen pada laman Anda dengan hal berikut:

* {
  will-change: transform;
  transform: translateZ(0);
}

Yang merupakan jalan memutar untuk mengatakan bahwa Anda ingin mempromosikan setiap elemen di halaman. Masalahnya di sini adalah setiap lapisan yang Anda buat memerlukan memori dan pengelolaan, dan itu tidak gratis. Faktanya, pada perangkat dengan memori terbatas, dampak pada kinerja dapat jauh lebih besar dibandingkan manfaat pembuatan lapisan. Setiap tekstur lapisan harus diupload ke GPU, sehingga ada batasan lebih lanjut terkait bandwidth antara CPU dan GPU, serta memori yang tersedia untuk tekstur di GPU.

Gunakan Chrome DevTools untuk memahami lapisan di aplikasi Anda

Tombol untuk paint profiler di Chrome DevTools.

Untuk memahami layer di aplikasi Anda, dan mengapa suatu elemen memiliki layer, Anda harus mengaktifkan Paint profiler di Chrome DevTools' Rentang waktu:

Dengan mengaktifkan ini, Anda harus mengambil rekaman. Setelah perekaman selesai, Anda dapat mengklik frame individual, yang ditemukan di antara batang frame-per-detik dan detailnya:

Frame yang ingin dibuat profilnya oleh developer.

Mengkliknya akan memberi Anda opsi baru di detail: tab layer.

Tombol tab layer di Chrome DevTools.

Opsi ini akan memunculkan tampilan baru yang memungkinkan Anda menggeser, memindai, dan memperbesar semua lapisan selama bingkai tersebut, bersama dengan alasan dibuatnya setiap lapisan.

Tampilan lapisan di Chrome DevTools.

Dengan tampilan ini Anda dapat melacak jumlah lapisan yang Anda miliki. Jika Anda menghabiskan banyak waktu dalam melakukan komposisi selama tindakan yang penting bagi performa seperti men-scroll atau transisi (sebaiknya target sekitar 4-5 md), Anda dapat menggunakan informasi di sini untuk melihat jumlah lapisan yang dimiliki, alasan pembuatannya, dan mengelola jumlah lapisan di aplikasi Anda.