Ringkasan: Chromium mengupdate kemampuan akselerasi hardware secara otomatis untuk animasi SVG, transformasi berbasis persentase, dan yang akan segera hadir, animasi warna latar belakang dan jalur klip.
Dalam hal performa animasi web, istilah "akselerasi hardware" dan animasi "diakselerasi GPU" kemungkinan akan muncul. Tapi apa artinya? Gaya dengan akselerasi hardware adalah gaya yang memanfaatkan GPU (Unit Pemrosesan Grafis), bukan CPU (Unit Pemrosesan Pusat) untuk merender gaya visual. Hal ini karena GPU dapat merender perubahan visual di halaman web lebih cepat daripada CPU.
Menggunakan GPU untuk memindahkan transisi dan animasi yang intensif grafis akan menghasilkan visual yang lebih halus dan lebih sedikit jank, karena animasi tersebut tidak terpengaruh oleh thread utama. Dengan mengambilnya dari thread utama, animasi Anda akan melewati sisi skrip aktif lainnya yang berjalan di halaman, yang akan memperlambat visual Anda dan menimbulkan jank.
Mengaktifkan animasi dengan akselerasi hardware
Animasi dengan akselerasi hardware disusun sebagai lapisan dan membantu developer mencapai animasi 60 FPS (frame per detik) yang mulus untuk meningkatkan performa rendering visual. Saat ini ada beberapa cara untuk menentukan dan mengaktifkan animasi dan transisi dengan akselerasi hardware di web:
- Gunakan fungsi
transform
CSS atau transisikan nilaiopacity
ataufilter
- Tambahkan properti
will-change
ke elemen Anda. - Buat gambar kanvas animasi melalui
OffscreenCanvas
- Membuat gambar 3D WebGL
opacity
, filter
, dan
transform
untuk saat ini, background-color
dan clip-path
akan segera bergabung dalam daftar. Apa lagi yang menjadikan akselerasi hardware meningkat secara default di Chromium? Ada beberapa hal yang akan masuk dalam pipeline, termasuk animasi SVG, sesuatu yang sangat diminta oleh developer.
Animasi SVG dengan akselerasi hardware
SVG adalah tambahan yang bagus untuk situs web apa pun, dan kini interaksi tersebut dengan SVG bisa lebih berperforma tinggi. Mulai Chromium 89, Chrome akan bergabung dengan Firefox untuk mengaktifkan akselerasi hardware secara default pada animasi SVG. Apa yang perlu Anda, sebagai developer, lakukan? Tidak ada—cara ini akan otomatis diterapkan untuk animasi SVG di Chromium 89+.
Contoh
Mari kita lihat perbedaan antara animasi SVG dengan dan tanpa mengaktifkan akselerasi hardware. Indikator pemuatan adalah elemen UI yang biasa digunakan, seperti yang terlihat di facebook.com. Indikator ini mengisyaratkan tugas yang sedang dilakukan di server, sementara pengguna menunggu respons. Pada kasus yang ditampilkan di sini, responsnya adalah memuat hasil tambahan di sidebar.
Saat membuka DevTools, kita dapat mulai membuat profil dan benar-benar melihat perbedaan antara pengalaman animasi yang dipercepat oleh CPU dan GPU.
![Panel performa dengan flash cat diaktifkan](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-paint-1c546b2fb2532.png?authuser=6&hl=id)
Anda dapat melihat bahwa di sebelah kiri (Chromium 87), penggambaran ulang terjadi setiap kali indikator lingkaran berputar dianimasikan (yang terus berlanjut). Di sebelah kanan, tidak ada pengecatan ulang (Chromium 89 dan Firefox). Kita dapat menguji ini di panel Rendering DevTools, saat mengaktifkan flash Paint.
![Panel performa yang menampilkan rendering](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-showing-bdf7ff078e40e.png?authuser=6&hl=id)
Setelah melihat panel Performa lebih lanjut, Anda dapat melihat lagi efek ini, dan pengaruhnya terhadap keseluruhan performa properti web. Anda menghindari waktu rendering dan proses menggambar sepenuhnya untuk animasi, yang berarti animasi lebih halus dan aplikasi yang berperforma lebih baik. Meskipun Facebook tidak akan mengirimkan loader berbasis SVG ini hingga dukungan browser untuk SVG dengan akselerasi hardware semakin besar, Facebook akan memungkinkan lebih banyak fleksibilitas dalam hal tema, penskalaan dan persyaratan resolusi, serta pemeliharaan yang lebih mudah.
Animasi persentase
Tim Interactions juga mengirimkan dukungan untuk animasi transformasi persentase di
Chromium 89. Animasi berbasis persentase menjelaskan interaksi yang mencakup gerakan
berbasis persentase. Misalnya, Anda dapat meningkatkan skala sebesar 20%, atau menggeser menu sidebar responsif dari
luar layar menggunakan sesuatu seperti translateX: -100%
.
Jenis animasi UI ini relatif umum, tetapi saat ini tidak memanfaatkan akselerasi hardware karena sebelumnya kami tidak dapat menggabungkan animasi tersebut. Persentase dalam transformasi bergantung pada ukuran kotak (yaitu tata letak), tetapi sekarang, selama ukuran tata letak tidak berubah setiap frame, browser dapat menghitung sebelumnya nilai transformasi absolut dan menjalankannya seolah-olah developer telah memberikan nilai piksel. Kabar baiknya adalah tim Chromium sedang mengerjakan fitur ini, dan dalam waktu dekat, jenis animasi ini akan otomatis digabungkan dan diakselerasi dengan hardware.
Apa yang akan terjadi berikutnya?
Animasi yang diperbarui ini akan membuat gaya web jauh lebih halus. Dan seperti yang disebutkan di atas, tim ini selalu mencari
tahu apa kebutuhan web yang akan datang muncul. Saat ini, kita bersiap untuk mengonversi
background-color
dan clip-path
agar otomatis menggunakan akselerasi hardware di Chromium versi
mendatang.
background-color
menjadi prioritas karena jumlah
penggunaannya yang tinggi untuk transisi dan
efek, dan clip-path
memungkinkan efek transisi berperforma jauh lebih baik di seluruh web. Ketika kinerja bertemu interaktivitas, semua
orang menang!
Gambar Sampul: Siora Fotografi untuk Unsplash.