Animasi dan performa

Animasi harus berperforma baik, jika tidak, animasi tersebut akan berdampak negatif pada pengalaman pengguna.

Pertahankan 60 fps setiap kali Anda membuat animasi, karena jika lebih sedikit akan mengakibatkan ketersendatan atau macet yang akan terlihat oleh pengguna dan berdampak negatif terhadap pengalaman mereka.

  • Jaga agar animasi Anda tidak menyebabkan masalah kinerja; pastikan bahwa Anda mengetahui dampak menganimasikan properti CSS tertentu.
  • Menganimasikan properti yang mengubah geometri halaman (tata letak) atau menyebabkan paint sangat merugikan.
  • Sebisa mungkin, usahakan untuk mengubah transform dan opacity.
  • Gunakan will-change untuk memastikan bahwa browser tahu apa yang ingin Anda animasikan.

Menganimasikan properti tidaklah gratis, dan beberapa properti lebih murah dianimasikan dibandingkan yang lain. Misalnya, menganimasikan width dan height elemen akan mengubah geometrinya dan dapat menyebabkan elemen lain pada halaman tersebut berpindah atau berubah ukurannya. Proses ini disebut tata letak (atau ubah posisi/geometri di browser berbasis Gecko seperti Firefox), dan dapat menjadi 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.

Bila memungkinkan, Anda harus menghindari menganimasikan 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 membuat animasi berperforma tinggi.

Menggunakan properti will-change

Dukungan Browser

  • 36
  • 79
  • 36
  • 9.1

Sumber

Gunakan will-change untuk memastikan browser mengetahui bahwa Anda ingin mengubah properti elemen. Hal ini memungkinkan browser untuk menetapkan pengoptimalan yang paling tepat sebelum Anda membuat perubahan. Namun, jangan menggunakan will-change secara berlebihan karena hal tersebut dapat menyebabkan browser membuang resource, yang pada akhirnya akan menyebabkan lebih banyak masalah performa.

Aturan praktisnya adalah jika animasi dapat dipicu dalam 200 md berikutnya, baik oleh interaksi pengguna maupun karena status aplikasi, penggunaan will-change pada elemen animasi adalah ide bagus. Oleh karena itu, untuk sebagian besar kasus, elemen apa pun dalam tampilan aplikasi saat ini yang ingin Anda animasikan harus mengaktifkan will-change untuk properti mana pun yang ingin Anda ubah. Dalam kasus contoh box yang telah kita gunakan di seluruh panduan sebelumnya, menambahkan will-change untuk transformasi dan opasitas akan terlihat seperti ini:

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

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 thread halaman dan komentar di web yang membahas manfaat relatif animasi CSS dan JavaScript dari perspektif performa. Berikut ini beberapa poin yang perlu diingat:

  • 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. Artinya, jika browser menjalankan beberapa tugas mahal di thread utama, animasi ini dapat terus berjalan tanpa terganggu.

  • Perubahan lain pada transformasi dan opasitas juga dapat ditangani oleh thread compositor.

  • Jika animasi memicu paint, layout, atau keduanya, "thread utama" akan diperlukan untuk melakukan pekerjaan. Hal ini berlaku untuk animasi berbasis CSS maupun JavaScript, dan overhead tata letak atau paint kemungkinan akan mengecilkan pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, sehingga menimbulkan pertanyaan yang tidak jelas.