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 tahu dampak menganimasikan properti CSS yang diberikan.
• 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 mengubah posisi/geometri di browser berbasis Gecko seperti Firefox), dan bisa sangat merugikan 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 layout atau paint. 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 menetapkan optimalisasi yang paling tepat sebelum Anda membuat 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 mudahnya adalah bahwa jika animasi mungkin dipicu dalam 200 md berikutnya, baik oleh interaksi pengguna atau karena status aplikasi, maka menggunakan will-change pada elemen animasi adalah ide yang baik. 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 poin 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, tempat gaya visual, tata letak, painting, 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.