Animasi harus berperforma baik, jika tidak, animasi akan berdampak negatif pada pengalaman pengguna.
Pertahankan 60 fps setiap kali Anda menganimasikan, karena kecepatan yang lebih rendah akan menyebabkan gangguan atau jeda yang akan terlihat oleh pengguna dan berdampak negatif pada pengalaman mereka.
- Pastikan animasi Anda tidak menyebabkan masalah performa; pastikan Anda mengetahui dampak dari menganimasikan properti CSS tertentu.
- Menganimasikan properti yang mengubah geometri halaman (tata letak) atau menyebabkan proses menggambar sangat mahal.
- Jika memungkinkan, tetap gunakan transformasi dan opasitas yang berubah.
- Gunakan
will-change
untuk memastikan browser mengetahui apa yang ingin Anda animasikan.
Menganimasikan properti tidak gratis, dan beberapa properti lebih murah untuk dianimasikan daripada yang lain. Misalnya, menganimasikan width
dan height
elemen akan mengubah geometrinya dan dapat menyebabkan elemen lain di halaman bergerak atau mengubah ukuran. Proses ini disebut tata letak (atau reflow di browser berbasis Gecko seperti Firefox), dan dapat mahal jika halaman Anda memiliki banyak elemen. Setiap kali tata letak dipicu, halaman atau bagiannya biasanya perlu digambar, yang biasanya bahkan lebih mahal daripada operasi tata letak itu sendiri.
Jika memungkinkan, Anda harus menghindari animasi properti yang memicu tata letak atau gambar. Untuk sebagian besar browser modern, hal ini berarti membatasi animasi ke opacity
atau transform
, yang keduanya dapat dioptimalkan dengan sangat baik oleh browser; tidak masalah apakah animasi ditangani oleh JavaScript atau CSS.
Baca panduan lengkap tentang cara membuat animasi berperforma tinggi.
Menggunakan properti will-change
Gunakan will-change
untuk memastikan browser mengetahui bahwa Anda ingin mengubah properti elemen. Hal ini memungkinkan browser menerapkan pengoptimalan yang paling sesuai sebelum Anda melakukan perubahan. Namun, jangan terlalu sering menggunakan will-change
karena hal itu dapat menyebabkan browser membuang-buang resource, yang pada akhirnya menyebabkan lebih banyak masalah performa.
Aturan umum adalah jika animasi mungkin dipicu dalam 200 md berikutnya, baik oleh interaksi pengguna maupun karena status aplikasi Anda, sebaiknya gunakan will-change
pada elemen animasi. Jadi, untuk sebagian besar kasus, setiap elemen dalam tampilan aplikasi saat ini yang ingin Anda animasikan harus mengaktifkan will-change
untuk properti yang ingin Anda ubah. Untuk contoh kotak yang telah kita gunakan di seluruh panduan sebelumnya, menambahkan will-change
untuk transformasi dan opasitas akan terlihat seperti ini:
.box {
will-change: transform, opacity;
}
Sekarang, browser yang mendukungnya, saat ini sebagian besar browser modern, akan melakukan pengoptimalan yang sesuai di balik layar untuk mendukung perubahan atau animasi properti tersebut.
Performa CSS vs. JavaScript
Ada banyak halaman dan rangkaian pesan di seluruh web yang membahas manfaat relatif animasi CSS dan JavaScript dari perspektif performa. Berikut beberapa hal yang perlu diperhatikan:
Animasi berbasis CSS, dan Animasi Web yang didukung secara native, biasanya ditangani di thread yang dikenal sebagai "thread komposer". Hal ini berbeda dengan "thread utama" browser, tempat gaya visual, tata letak, gambar, dan JavaScript dijalankan. Artinya, jika browser menjalankan beberapa tugas yang mahal di thread utama, animasi ini dapat terus berjalan tanpa terganggu.
Dalam banyak kasus, perubahan lain pada transformasi dan opasitas juga dapat ditangani oleh thread kompositor.
Jika animasi memicu gambar, tata letak, atau keduanya, "thread utama" akan diperlukan untuk melakukan pekerjaan. Hal ini berlaku untuk animasi berbasis CSS dan JavaScript, dan overhead tata letak atau gambar kemungkinan akan memperkecil pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, sehingga pertanyaan ini menjadi tidak relevan.