Berpegang pada Properti Khusus Kompositor dan Kelola Jumlah Lapisan

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

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:

Pipeline piksel tanpa layout atau paint.

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

Properti yang dapat Anda animasikan tanpa memicu layout atau paint.

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.

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 lama, atau yang tidak mendukung will-change:

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

Kelola lapisan dan hindari 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 di halaman. 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.

Menggunakan Chrome DevTools untuk memahami lapisan di aplikasi Anda

Tombol untuk paint profiler di Chrome DevTools.

Untuk memahami layer di aplikasi Anda, dan mengapa elemen memiliki layer, Anda harus mengaktifkan Paint profiler di Linimasa 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:

Bingkai yang ingin dibuat profilnya oleh developer.

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

Tombol tab lapisan di Chrome DevTools.

Opsi ini akan menampilkan tampilan baru yang memungkinkan Anda 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 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 jumlah lapisan yang Anda miliki, alasan pembuatannya, dan dari sana mengelola jumlah lapisan di aplikasi Anda.