Browser modern dapat menganimasikan dua properti CSS dengan biaya murah: transform dan opacity.
Jika Anda menganimasikan hal lain, kemungkinannya Anda tidak akan mencapai 60 frame per detik (FPS) yang mulus.
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 mengupdate dan mengecat ulang layar. Jika setiap frame tidak selesai dalam waktu 16,7 md (1.000 md / 60 ≈ 16,7), pengguna akan melihat penundaan.
Pipeline rendering
Untuk menampilkan sesuatu pada halaman web, browser harus melalui langkah-langkah berikut:
- Gaya: Menghitung gaya yang berlaku untuk elemen.
- Tata letak: Membuat geometri dan posisi untuk setiap elemen.
- Paint: Mengisi piksel untuk setiap elemen ke dalam lapisan.
- Gabungan: 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-langkah paint dan composite 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>, salah satu 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 penentuan urutan elemen yang harus digambar pada layar. Sering kali ini yang paling lama berjalan dari semua tugas di 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).
Inilah sebabnya properti opacity disertakan dalam daftar hal-hal yang murah untuk dianimasikan.
Selama properti ini berada di lapisannya sendiri, perubahan pada properti ini 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 menggambar ulang item tersebut, 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 itu.
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. Di perangkat dengan memori terbatas, membuat lapisan baru dapat menyebabkan lebih banyak masalah performa daripada masalah yang Anda coba pecahkan. Selain itu, tekstur setiap lapisan perlu 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 Animasi Web (di browser yang mendukung API), biasanya ditangani di thread yang dikenal sebagai thread compositor. Hal ini berbeda dengan thread utama browser, yang menjalankan penataan gaya visual, tata letak, penggambaran, dan JavaScript. Artinya, jika browser sedang menjalankan beberapa tugas penting di thread utama, animasi ini bisa terus bekerja tanpa terganggu.
Seperti yang dijelaskan dalam artikel ini, 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 diperlukan untuk melakukan pekerjaan. Hal ini berlaku untuk animasi CSS dan JavaScript, dan overhead tata letak atau paint kemungkinan akan mengerdilkan pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, yang merender perdebatan pertanyaan.