Animasi dan performa

Animasi harus berjalan dengan baik, jika tidak mereka akan berdampak negatif pada pengalaman pengguna.

Paul Lewis

Sam Thorogood

Pertahankan 60 fps setiap kali Anda melakukan animasi, karena bila kurang bisa mengakibatkan ketidaklancaran atau perlambatan yang akan terlihat oleh pengguna dan berdampak negatif terhadap pengalaman pengguna.

• Pastikan animasi Anda tidak menyebabkan masalah performa; pastikan Anda mengetahui dampak animasi properti CSS tertentu.
• Menganimasikan properti yang bisa mengubah geometri laman (tata letak) atau menyebabkan painting berdampak sangat merugikan.
• Sebisa mungkin, tetap konsisten pada ubahan transform dan opacity.
• Gunakan will-change untuk memastikan bahwa browser tahu yang Anda rencanakan untuk dianimasikan.

Menganimasikan properti ini bukannya tanpa risiko, dan beberapa properti lebih mudah dianimasikan dibandingkan yang lainnya. Misalnya, menganimasikan width dan height dari sebuah elemen akan mengubah geometrinya dan dapat menyebabkan elemen lain pada 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 darinya biasanya perlu digambar, yang biasanya lebih mahal daripada operasi tata letak itu sendiri.

Sebisa mungkin, Anda harus menghindari melakukan animasi properti yang memicu tata letak atau gambar. Untuk sebagian besar browser modern, 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 bermaksud 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 membuang sumber daya, yang pada akhirnya dapat 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. Pada kebanyakan kasus, setiap elemen dalam tampilan aktif aplikasi yang Anda ingin animasikan harus mengaktifkan will-change untuk properti apa pun yang ingin Anda ubah. Pada kasus contoh kotak yang telah digunakan dalam panduan sebelumnya, menambahkan will-change untuk transformasi dan opasitas terlihat seperti ini:

.box {
  will-change: transform, opacity;
}

Sekarang browser yang mendukungnya, saat ini sebagian besar browser modern, akan membuat optimalisasi yang sesuai dalam pengaturannya untuk mendukung perubahan atau menganimasikan properti tersebut.

Performa CSS vs JavaScript

Ada banyak thread laman dan komentar di web yang membahas manfaat relatif dari animasi CSS dan JavaScript dari perspektif performa. Berikut beberapa hal yang perlu diperhatikan:

• Animasi berbasis CSS, dan Animasi Web yang aslinya sudah 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 sedang menjalankan beberapa tugas penting di thread utama, animasi ini bisa terus bekerja tanpa terganggu.

• Perubahan lain untuk mengubah transform dan opacity, dalam beberapa kasus, juga ditangani oleh thread compositor.

• Jika animasi memicu paint, tata letak, atau keduanya, "thread utama" akan diharuskan untuk bekerja. Hal ini berlaku untuk animasi berbasis CSS dan JavaScript, dan overhead tata letak atau paint akan mengerdilkan setiap pekerjaan yang terkait dengan eksekusi CSS atau JavaScript, membuat persoalan yang tidak pasti.