Browser modern dapat menganimasikan dua properti CSS dengan biaya murah: transform dan opacity.
Jika Anda menganimasikan hal lain, kemungkinan Anda tidak akan mencapai 60 frame per detik (FPS) yang halus.
Postingan ini menjelaskan alasannya.
Performa animasi dan kecepatan frame
Kecepatan frame 60 FPS secara luas diterima sebagai target saat menganimasikan apa pun di web. Kecepatan frame ini akan memastikan animasi Anda terlihat lancar. Di web, frame adalah waktu yang diperlukan untuk melakukan semua pekerjaan yang diperlukan untuk memperbarui dan menggambar ulang layar. Jika setiap frame tidak selesai dalam waktu 16,7 md (1000 md / 60 ≈ 16,7), pengguna akan merasakan keterlambatan.
Pipeline rendering
Untuk menampilkan sesuatu di halaman web, browser harus melalui langkah-langkah berurutan berikut:
- Gaya: Menghitung gaya yang berlaku untuk elemen.
- Tata letak: Buat geometri dan posisi untuk setiap elemen.
- Cat: Mengisi piksel untuk setiap elemen.
- Komposit: Memisahkan elemen menjadi lapisan dan menggambar lapisan ke layar.
Keempat langkah ini dikenal sebagai pipeline rendering browser.
Saat Anda menganimasikan sesuatu di halaman yang telah dimuat, langkah-langkah ini harus dilakukan lagi. Proses ini dimulai dari langkah yang harus diubah agar animasi dapat berlangsung.
Seperti yang disebutkan sebelumnya, langkah-langkah ini bersifat berurutan. Misalnya, jika Anda menganimasikan sesuatu yang mengubah tata letak, langkah cat dan komposit juga harus dijalankan lagi. Oleh karena itu, menganimasikan sesuatu yang mengubah tata letak lebih mahal daripada menganimasikan sesuatu yang hanya mengubah komposisi.
Menganimasikan properti tata letak
Perubahan tata letak melibatkan penghitungan geometri (posisi dan ukuran) semua elemen yang terpengaruh oleh perubahan.
Jika Anda mengubah satu elemen,
geometri elemen lain mungkin perlu dihitung ulang.
Misalnya, jika Anda mengubah lebar elemen <html>, setiap turunannya dapat terpengaruh.
Karena cara elemen meluap dan memengaruhi satu sama lain,
perubahan di bagian bawah hierarki terkadang dapat menyebabkan penghitungan tata letak kembali ke atas.
Makin besar hierarki elemen yang terlihat, makin lama waktu yang diperlukan untuk melakukan penghitungan tata letak.
Menganimasikan properti cat
Paint adalah proses menentukan urutan elemen yang harus digambar ke layar. Tugas ini sering kali berjalan paling lama dari semua tugas dalam pipeline.
Sebagian besar proses menggambar di browser modern dilakukan di rasterizer software. Bergantung pada cara elemen di aplikasi Anda dikelompokkan ke dalam lapisan, elemen lain selain yang berubah mungkin juga perlu digambar.
Menganimasikan properti gabungan
Komposisi adalah proses memisahkan halaman menjadi beberapa lapisan, mengonversi informasi tentang tampilan halaman menjadi piksel (rasterisasi), dan menggabungkan lapisan untuk membuat halaman (komposisi).
Itulah sebabnya properti opacity disertakan dalam daftar hal-hal yang murah untuk dianimasikan.
Selama properti ini berada di lapisannya sendiri, perubahan pada properti tersebut dapat ditangani oleh GPU selama langkah komposisi.
Browser berbasis Chromium dan WebKit membuat lapisan baru untuk elemen apa pun yang memiliki transisi atau animasi CSS di opacity.
Apa yang dimaksud dengan lapisan?
Dengan menempatkan hal-hal yang akan dianimasikan atau ditransisikan ke lapisan baru, browser hanya perlu mengecat ulang item tersebut dan bukan yang lainnya. Anda mungkin sudah memahami konsep lapisan Photoshop yang berisi sekumpulan elemen yang dapat dipindahkan bersama-sama. Lapisan rendering browser mirip dengan ide tersebut.
Meskipun browser melakukan pekerjaan yang baik dalam membuat keputusan tentang elemen yang harus ada di lapisan baru, jika salah satu elemen tidak ada, ada cara untuk memaksa pembuatan lapisan. Anda dapat mengetahuinya di Cara membuat animasi berperforma tinggi. Namun, pembuatan lapisan baru harus dilakukan dengan hati-hati karena setiap lapisan menggunakan memori. Pada perangkat dengan memori terbatas, membuat lapisan baru dapat menyebabkan lebih banyak masalah performa daripada yang Anda coba pecahkan. Selain itu, tekstur setiap lapisan harus diupload ke GPU. Oleh karena itu, Anda mungkin akan mengalami batasan bandwidth antara CPU dan GPU.
Performa CSS vs JavaScript
Anda mungkin bertanya-tanya: apakah lebih baik dari perspektif performa untuk menggunakan CSS atau JavaScript untuk animasi?
Animasi berbasis CSS, dan Web Animations (di browser yang mendukung API), 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.
Seperti yang dijelaskan dalam artikel ini, perubahan lain pada transformasi dan opasitas, dalam banyak kasus, 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 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.