Browser modern dapat menganimasikan dua properti CSS dengan murah: transform dan opacity.
Jika Anda menganimasikan hal lain, kemungkinan Anda tidak akan mencapai 60 frame per detik (FPS) yang lancar.
Postingan ini menjelaskan alasannya.
Performa animasi dan kecepatan frame
Secara umum, kecepatan frame 60 FPS adalah 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 penundaan.
Pipeline rendering
Untuk menampilkan sesuatu di halaman web, browser harus melalui langkah-langkah berurutan berikut:
- Gaya: Menghitung gaya yang diterapkan pada elemen.
- Tata letak: Buat geometri dan posisi untuk setiap elemen.
- Mewarnai: Mengisi piksel untuk setiap elemen.
- Komposit: Pisahkan elemen menjadi lapisan dan gambar lapisan ke layar.
Keempat langkah ini dikenal sebagai pipeline rendering browser.
Saat Anda menganimasikan sesuatu di halaman yang sudah dimuat, langkah-langkah ini harus dilakukan lagi. Proses ini dimulai dari langkah yang harus diubah agar animasi dapat terjadi.
Seperti yang disebutkan sebelumnya, langkah-langkah ini bersifat berurutan. Misalnya, jika Anda menganimasikan sesuatu yang mengubah tata letak, langkah-langkah paint dan komposit juga harus dijalankan lagi. Menganimasikan sesuatu yang mengubah tata letak oleh karena itu 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>, semua turunannya dapat terpengaruh.
Karena cara elemen meluap dan saling memengaruhi, perubahan lebih jauh ke bawah hierarki terkadang dapat menyebabkan penghitungan tata letak kembali ke atas.
Makin besar hierarki elemen yang terlihat, makin lama waktu yang diperlukan untuk melakukan perhitungan tata letak.
Menganimasikan properti cat
Paint adalah proses penentuan urutan elemen yang harus digambar ke layar. Tugas ini sering kali merupakan tugas yang berjalan paling lama di semua tugas dalam pipeline.
Sebagian besar penggambaran di browser modern dilakukan di rasterizer software. Bergantung pada cara elemen di aplikasi Anda dikelompokkan ke dalam lapisan, elemen lain selain elemen yang berubah juga mungkin perlu digambar.
Menganimasikan properti komposit
Komposisi adalah proses memisahkan halaman menjadi beberapa lapisan, mengonversi informasi tentang tampilan halaman menjadi piksel (rasterisasi), dan menyatukan 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 ini dapat ditangani oleh GPU selama langkah komposit.
Browser berbasis Chromium dan WebKit membuat lapisan baru untuk elemen apa pun yang memiliki transisi atau animasi CSS pada opacity.
Apa itu lapisan?
Dengan menempatkan hal-hal yang akan dianimasikan atau ditransisikan ke lapisan baru, browser hanya perlu mengecat ulang item tersebut, bukan semuanya. Anda mungkin sudah familiar dengan konsep layer Photoshop yang berisi banyak elemen yang dapat dipindahkan bersama-sama. Lapisan rendering browser mirip dengan ide tersebut.
Meskipun browser dapat membuat keputusan dengan baik tentang elemen apa yang harus ada di lapisan baru, jika ada elemen yang terlewat, 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 masalah performa yang lebih besar daripada masalah yang sedang Anda coba selesaikan. Selain itu, tekstur setiap lapisan harus diupload ke GPU. Oleh karena itu, Anda mungkin akan mengalami kendala bandwidth antara CPU dan GPU.
Performa CSS vs. JavaScript
Anda mungkin bertanya-tanya: dari perspektif performa, apakah lebih baik 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 compositor. Hal ini berbeda dengan thread utama browser, tempat gaya, tata letak, gambar, dan JavaScript dieksekusi. Artinya, jika browser menjalankan beberapa tugas berat di thread utama, animasi ini dapat terus berjalan tanpa terganggu.
Seperti yang dijelaskan dalam artikel ini, perubahan lain pada transformasi dan keburaman juga dapat ditangani oleh thread compositor dalam banyak kasus.
Jika ada animasi yang 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 gambar kemungkinan akan jauh lebih besar daripada pekerjaan apa pun yang terkait dengan eksekusi CSS atau JavaScript, sehingga pertanyaan ini tidak relevan.