Animasi harus berfungsi dengan baik, jika tidak, animasi akan berdampak negatif pada pengalaman pengguna.
Pertahankan 60 fps setiap kali Anda menganimasikan, karena bila kurang akan mengakibatkan ketersendatan atau hambatan yang akan terlihat oleh pengguna dan berdampak negatif pada pengalaman mereka.
- Pastikan animasi Anda tidak menyebabkan masalah performa; pastikan Anda mengetahui dampak animasi properti CSS tertentu.
- Menganimasikan properti yang mengubah geometri halaman (layout) atau menyebabkan proses menggambar sangat memakan banyak resource.
- Sebisa mungkin, tetap gunakan perubahan transform dan opasitas.
- Gunakan
will-changeuntuk memastikan bahwa browser tahu apa yang ingin Anda animasikan.
Menganimasikan properti tidaklah gratis, dan beberapa properti lebih murah untuk dianimasikan dibandingkan yang lain. Misalnya, menganimasikan width dan height elemen akan mengubah geometrinya dan dapat menyebabkan elemen lain di halaman tersebut berpindah atau berubah ukurannya. Proses ini disebut tata letak (atau perubahan posisi/geometri di browser berbasis Gecko seperti Firefox), dan bisa jadi mahal jika halaman Anda memiliki banyak elemen. Setiap kali tata letak dipicu, halaman atau bagian dari tata letak biasanya perlu digambar, yang biasanya bahkan lebih mahal daripada operasi tata letak itu sendiri.
Sebisa mungkin, Anda harus menghindari menganimasikan properti yang memicu tata letak atau paint. Untuk sebagian besar browser modern, hal ini berarti membatasi animasi ke opacity atau transform, yang keduanya dapat dioptimalkan oleh browser; tidak masalah jika 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 untuk menerapkan pengoptimalan yang paling tepat sebelum Anda melakukan perubahan. Namun, jangan terlalu sering menggunakan will-change, karena hal itu dapat menyebabkan browser menyia-nyiakan resource, yang pada akhirnya menyebabkan lebih banyak masalah performa.
Aturan praktisnya adalah jika animasi mungkin dipicu dalam 200 milidetik berikutnya, baik oleh interaksi pengguna atau karena status aplikasi Anda, sebaiknya gunakan will-change pada elemen animasi. Untuk sebagian besar kasus, setiap elemen dalam tampilan saat ini yang ingin Anda animasikan harus memiliki will-change yang diaktifkan untuk properti mana pun yang ingin Anda ubah. Untuk contoh kotak yang telah kita gunakan di seluruh panduan sebelumnya, penambahan will-change untuk transformasi dan opasitas akan terlihat seperti ini:
.box {
will-change: transform, opacity;
}
Kini, browser yang mendukungnya, saat ini sebagian besar browser modern, akan melakukan pengoptimalan yang sesuai untuk mendukung perubahan atau animasi properti tersebut.
Performa CSS vs. JavaScript
Ada banyak utas komentar dan halaman di web yang membahas manfaat relatif animasi CSS dan JavaScript dari perspektif kinerja. Berikut beberapa hal yang perlu diperhatikan:
Animasi berbasis CSS, dan Animasi Web yang secara native didukung biasanya ditangani di thread yang dikenal sebagai "thread compositor". Hal ini berbeda dengan "thread utama" browser, dengan penataan gaya, tata letak, penggambaran, dan JavaScript dieksekusi. Ini berarti bahwa jika browser menjalankan beberapa tugas yang mahal di thread utama, animasi ini dapat terus berjalan tanpa terganggu.
Perubahan lain pada transformasi dan opasitas juga bisa, dalam banyak kasus, juga ditangani oleh thread compositor.
Jika animasi memicu paint, tata letak, atau keduanya, "thread utama" akan diperlukan agar dapat berfungsi. Hal ini berlaku untuk animasi berbasis CSS dan JavaScript, dan overhead tata letak atau paint kemungkinan akan mengerdilkan pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, sehingga menimbulkan perdebatan.