Berpegang pada Properti Khusus Kompositor dan Kelola Jumlah Lapisan

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

Paul Lewis

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

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

Ringkasan

• Berpeganglah pada perubahan transform dan opacity untuk animasi Anda.
• Promosikan elemen bergerak dengan will-change atau translateZ.
• Hindari berlebihan menggunakan aturan promosi; layer memerlukan memori dan pengelolaan.

Menggunakan perubahan transformasi dan opasitas untuk animasi

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

Untuk mencapai hal ini, Anda perlu berpegang pada perubahan properti yang dapat ditangani oleh compositor sendiri. Saat ini hanya ada dua properti yang berlaku dalam hal ini - transform dan opacity:

Yang harus diwaspadai dalam menggunakan transform dan opacity adalah bahwa elemen tempat Anda mengubah properti ini harus berada di lapisan kompositornya sendiri. Untuk membuat lapisan, Anda harus mempromosikan elemen, yang akan kita bahas berikutnya.

Catatan: Jika Anda khawatir tidak dapat membatasi animasi pada properti itu saja, lihat prinsip FLIP, yang dapat membantu Anda memetakan ulang animasi ke berbagai perubahan dalam transform dan opasitas dari properti yang lebih mahal.

Mempromosikan elemen yang rencananya akan Anda animasikan

Seperti yang kami sebutkan di bagian "Menyederhanakan kompleksitas paint dan mengurangi area paint", Anda harus mempromosikan elemen yang rencananya akan Anda animasikan (asalkan tidak berlebihan melakukannya!) ke layernya sendiri:

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

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

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

Mengelola lapisan dan menghindari ledakan lapisan

Hal ini mungkin menarik, maka, dengan mengetahui bahwa layer sering kali membantu kinerja, untuk mempromosikan semua elemen di laman Anda dengan sesuatu seperti berikut ini:

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

Yang merupakan jalan memutar untuk mengatakan bahwa Anda ingin mempromosikan setiap elemen tunggal di laman. Masalahnya adalah setiap lapisan yang Anda buat memerlukan memori dan pengelolaan, dan itu tidak gratis. Sebenarnya, di perangkat yang memiliki memori terbatas, dampak pada kinerja bisa jauh mengalahkan manfaat pembuatan lapisan. Setiap tekstur lapisan perlu diupload ke GPU, sehingga ada batasan lebih jauh dalam konteks bandwidth antara CPU dan GPU, dan memori yang tersedia untuk tekstur di GPU.

Peringatan : Jangan promosikan elemen yang tidak perlu.

Menggunakan Chrome DevTools untuk memahami lapisan di aplikasi Anda

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

Lakukan perekaman setelah mengaktifkannya. Setelah perekaman selesai, Anda akan dapat mengklik bingkai individual, yang ditemukan di antara batang bingkai per detik dan detailnya:

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

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

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