Berpegang pada Properti Khusus Kompositor dan Kelola Jumlah Lapisan

Pengomposisian adalah tempat bagian yang digambar pada halaman ditempatkan bersama untuk ditampilkan di layar.

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

Ada dua faktor utama di area ini yang memengaruhi performa halaman: jumlah lapisan compositor yang perlu dikelola, dan properti yang Anda gunakan untuk animasi.

Ringkasan

  • Berpeganglah pada perubahan transformasi dan opasitas untuk animasi Anda.
  • Promosikan elemen yang bergerak dengan will-change atau translateZ.
  • Hindari penggunaan aturan promosi yang berlebihan; lapisan memerlukan memori dan pengelolaan.

Menggunakan perubahan transformasi dan opasitas untuk animasi

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

Pipeline piksel tanpa tata letak atau paint.

Untuk mencapai hal ini, Anda perlu tetap berpegang pada perubahan properti yang bisa ditangani oleh compositor saja. Saat ini hanya ada dua properti yang benar - transform dan opacity:

Properti yang dapat Anda animasikan tanpa memicu tata letak atau paint.

Peringatan 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, yang akan kita bahas selanjutnya.

Promosikan elemen yang rencananya akan Anda animasikan

Seperti yang kami sebutkan di bagian "Menyederhanakan kompleksitas paint dan mengurangi area paint", Anda harus mempromosikan elemen yang akan Anda animasikan (karenanya, 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

Anda mungkin tergoda, kemudian, mengetahui bahwa lapisan sering kali membantu kinerja, untuk mempromosikan semua elemen di laman Anda dengan sesuatu seperti berikut:

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

Yang merupakan cara memutar untuk mengatakan bahwa Anda ingin mempromosikan setiap elemen tunggal di laman. Masalahnya di sini adalah setiap lapisan yang Anda buat memerlukan memori dan manajemen, dan itu tidak gratis. Sebenarnya, pada perangkat dengan memori terbatas, dampak pada kinerja dapat jauh lebih besar daripada manfaat pembuatan lapisan. Setiap tekstur lapisan harus diupload ke GPU, sehingga ada batasan lebih lanjut dalam hal bandwidth antara CPU dan GPU, serta memori yang tersedia untuk tekstur pada GPU.

Menggunakan Chrome DevTools untuk memahami lapisan di aplikasi Anda

Tombol untuk paint profiler di Chrome DevTools.

Untuk memahami lapisan di aplikasi Anda, dan mengapa suatu elemen memiliki lapisan, Anda harus mengaktifkan Paint profiler di Timeline Chrome DevTools:

Dengan mengaktifkan ini, Anda akan merekam. Setelah perekaman selesai, Anda akan dapat mengklik setiap frame, yang ditemukan di antara batang frame per detik dan detailnya:

Frame yang ingin dibuat profilnya oleh developer.

Mengkliknya akan memberi Anda opsi baru dalam detailnya: tab lapisan.

Tombol tab lapisan di Chrome DevTools.

Opsi ini akan memunculkan tampilan baru yang memungkinkan Anda untuk menggeser, memindai, dan memperbesar semua lapisan selama bingkai tersebut, beserta alasan pembuatan setiap lapisan.

Tampilan lapisan di Chrome DevTools.

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