Browser modern dapat menganimasikan dua properti CSS dengan murah: transform dan opacity.
Jika Anda menganimasikan yang lain,
kemungkinan Anda tidak akan mencapai 60 frame per detik (FPS) yang mulus.
Postingan ini menjelaskan mengapa hal ini terjadi.
Performa animasi dan kecepatan frame
Telah diterima secara luas bahwa kecepatan frame 60 FPS adalah target saat menganimasikan apa pun di web. Frekuensi gambar ini akan memastikan bahwa animasi terlihat halus. Di web, {i>frame<i} 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 melihat penundaan tersebut.
Pipeline rendering
Untuk menampilkan sesuatu di halaman web, browser harus melalui langkah-langkah berikut secara berurutan:
- Gaya: Menghitung gaya yang berlaku untuk elemen.
- Tata letak: Buat geometri dan posisi untuk setiap elemen.
- Paint: Mengisi piksel untuk setiap elemen menjadi lapisan.
- Gabungan: Gambar lapisan ke layar.
Keempat langkah ini dikenal sebagai pipeline rendering browser.
Saat Anda menganimasikan sesuatu di halaman yang telah memuat, langkah-langkah ini harus terjadi lagi. Proses ini dimulai dari langkah yang harus diubah agar animasi dapat terjadi.
Seperti disebutkan sebelumnya, langkah-langkah ini bersifat berurutan. Misalnya, jika Anda menganimasikan sesuatu yang mengubah tata letak, langkah paint dan komposit juga harus dijalankan lagi. Oleh karena itu, menganimasikan sesuatu yang mengubah tata letak akan 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 tersebut.
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 untuk kembali ke atas.
Semakin besar hierarki elemen yang terlihat, semakin lama waktu yang dibutuhkan untuk melakukan penghitungan tata letak.
Menganimasikan properti paint
Paint adalah proses menentukan urutan elemen yang harus digambar ke layar. Sering kali ini yang paling lama berjalan dari semua tugas di pipeline.
Sebagian besar proses menggambar di browser modern dilakukan dalam rasaritizer software. Bergantung pada cara elemen di aplikasi Anda dikelompokkan ke dalam lapisan, elemen lain selain yang berubah mungkin juga perlu digambar.
Menganimasikan properti gabungan
Pengomposisian adalah proses pemisahan halaman menjadi beberapa lapisan, mengonversi informasi tentang tampilan halaman seharusnya menjadi piksel (rasterisasi), dan menyatukan lapisan untuk membuat halaman (pengomposisian).
Inilah sebabnya properti opacity disertakan dalam daftar objek yang murah untuk dianimasikan.
Selama properti ini berada dalam lapisannya sendiri, perubahannya dapat ditangani oleh GPU selama langkah pengomposisian.
Browser berbasis Chromium dan WebKit membuat lapisan baru untuk elemen apa pun yang memiliki transisi CSS atau animasi 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 familier dengan konsep {i>layer <i}(lapisan) Photoshop yang berisi banyak elemen yang dapat dipindahkan bersama. Lapisan rendering browser serupa dengan ide tersebut.
Meskipun browser melakukan pekerjaan yang baik dalam membuat keputusan tentang elemen apa yang harus berada di lapisan baru, jika ada elemen yang terlewat, ada cara untuk memaksa pembuatan lapisan. Anda dapat mencari tahu tentang hal tersebut di Cara membuat animasi berperforma tinggi. Akan tetapi, membuat layer baru harus dilakukan dengan hati-hati karena setiap lapisan menggunakan memori. Pada perangkat dengan memori terbatas, pembuatan lapisan baru dapat menimbulkan lebih banyak masalah kinerja daripada yang ingin Anda selesaikan. Selain itu, setiap tekstur lapisan perlu diupload ke GPU. Oleh karena itu, Anda mungkin akan mencapai batasan bandwidth antara CPU dan GPU.
Performa CSS vs JavaScript
Anda mungkin bertanya-tanya: dari perspektif kinerja, apakah lebih baik 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, tempat penataan gaya, tata letak, penggambaran, dan JavaScript dijalankan. Artinya, jika browser menjalankan beberapa tugas 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 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 mengecilkan pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, yang merender pertanyaan yang tidak perlu.