The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Berpeganglah pada Properti Compositor-Saja dan Kelola Jumlah Layer

Komposisi adalah proses penempatan bagian yang digambar pada laman untuk ditampilkan di layar.

Ada dua faktor utama dalam area ini yang memengaruhi kinerja laman: jumlah layer compositor yang perlu dikelola, dan properti yang Anda gunakan untuk animasi.

TL;DR

  • 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.

Gunakan perubahan transform dan opacity untuk animasi

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

Pipeline piksel tanpa layout atau paint.

Untuk menghasilkan hal ini, Anda perlu berpegang pada perubahan properti yang bisa ditangani oleh compositor sendiri. Sekarang hanya ada dua properti yang berlaku dalam hal ini: transforms dan opacity:

Properti yang bisa 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 pada layer compositor-nya sendiri. Untuk membuat layer, Anda harus mempromosikan elemen, yang akan kita bahas berikutnya.

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 rencananya akan Anda animasikan (asalkan tidak berlebihan melakukannya!) ke layernya sendiri:

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

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

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

Ini memberi peringatan dini kepada browser bahwa perubahan akan terjadi dan, bergantung pada apa yang rencananya akan Anda ubah, browser bisa saja membuat provisi, seperti membuat layer compositor.

Kelola layer dan hindari ledakan layer

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 layer 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 layer. Setiap tekstur layer perlu diunggah ke GPU, sehingga ada batasan lebih jauh dalam konteks bandwidth antara CPU dan GPU, dan memori yang tersedia untuk tekstur di GPU.

Gunakan Chrome DevTools untuk memahami layer di aplikasi Anda

Toggle untuk paint profiler di Chrome DevTools.

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

Lakukan perekaman setelah mengaktifkannya. Bila perekaman selesai, Anda akan dapat mengeklik bingkai individual, yang ditemukan di antara bilah bingkai-per-detik dan detailnya:

Bingkai yang ingin dibuat profilnya oleh developer.

Mengekliknya akan memberi Anda opsi baru dalam detail: tab layer.

Tombol tab layer di Chrome DevTools.

Opsi ini akan memberikan tampilan baru yang memungkinkan Anda menggeser, memindai, dan memperbesar semua layer selama bingkai itu, bersama alasan pembuatan layer itu.

Tampilan layer di Chrome DevTools.

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