Kinerja animasi

Kinerja animasi ditentukan oleh pekerjaan yang harus diulang browser pada setiap frame, bukan oleh panjang kode CSS-nya. Topik ini membahas tiga tahap biaya perender beserta properti yang memicu masing-masing, disiplin menganimasikan transform dan opacity, contoh animasi yang mahal beserta perbaikannya, penggunaan will-change yang terukur, serta pengukuran melalui panel Performance pada DevTools.

Tiga tahap biaya perender#

Setiap perubahan gaya diproses browser melalui tiga tahap yang biayanya berbeda. Tahap layout menghitung ulang geometri, yaitu posisi dan ukuran setiap elemen yang terdampak. Tahap paint mengisi ulang piksel pada area yang berubah, sedangkan tahap compositing menyusun lapisan-lapisan yang sudah digambar menjadi gambar akhir. Semakin awal tahap yang terpicu, semakin banyak pekerjaan yang diulang pada setiap frame.

Properti yang diubah menentukan tahap yang terpicu. Mengubah width atau top memicu layout, paint, dan compositing sekaligus, sedangkan mengubah color atau box-shadow memicu paint dan compositing saja. Properti transform dan opacity umumnya memicu compositing saja, karena keduanya tidak mengubah geometri maupun piksel lapisan yang sudah digambar. Diagram berikut merangkum ketiga tahap beserta contoh propertinya:

Banyak layar menyegarkan tampilan 60 kali per detik, sehingga setiap frame hanya memiliki anggaran waktu sekitar 16 milidetik. Apabila pekerjaan yang berulang melebihi anggaran itu, frame terlewat dan animasi tersendat, yaitu kondisi yang dikenal sebagai jank. Pemetaan properti ke tahap di atas menjadi tolok ukur untuk memperkirakan animasi mana yang berisiko melebihi anggaran itu.

Properti yang murah untuk dianimasikan#

Kelompok properti yang paling murah dianimasikan hanya berisi transform dan opacity. Keduanya bekerja pada lapisan yang sudah digambar, sehingga browser tidak perlu menghitung ulang geometri maupun mengisi ulang piksel saat nilainya berubah. Hampir seluruh gerak antarmuka dapat dibangun dari keduanya, karena geser, perbesar, putar, dan miring tersedia pada transform, sedangkan kemunculan dan peredupan ditangani opacity.

Untuk properti di luar kelompok tersebut, biayanya bertingkat menurut tahap yang dipicunya:

• Murah dan aman untuk dianimasikan, yaitu transform dan opacity.
• Berbiaya paint dan dapat diterima pada elemen kecil, yaitu color, background-color, dan box-shadow.
• Berbiaya layout dan perlu dihindari pada animasi berulang, yaitu width, height, margin, padding, top, left, dan font-size.

Contoh animasi yang mahal dan perbaikannya#

Kesalahan yang paling umum adalah menganimasikan properti layout pada perulangan. Kasus serupanya banyak, misalnya elemen yang dipindahkan dengan top dan left padahal seharusnya digeser dengan translate(). Contoh berikut menggerakkan barang melalui left, sehingga browser menghitung ulang geometri pada setiap frame, kemudian membandingkannya dengan versi yang menggunakan transform:

/* Lemah: left memicu layout pada setiap frame */
@keyframes geser-layout {
  from { left: 0; }
  to   { left: 240px; }
}

.barang-lemah {
  position: relative;
  left: 0;
  animation: geser-layout 2s linear infinite;
}

/* Baik: transform hanya menyusun ulang lapisan */
@keyframes geser-komposit {
  from { transform: translateX(0); }
  to   { transform: translateX(240px); }
}

.barang-baik {
  animation: geser-komposit 2s linear infinite;
}

Kedua versi menghasilkan gerak visual yang sama, tetapi beban yang dipikul browsernya berbeda. Versi left menghitung ulang posisi elemen dan seluruh tetangganya enam puluh kali per detik, sedangkan versi transform hanya memindahkan lapisan yang sudah digambar. Pada perangkat lambat, versi left terlihat tersendat karena setiap frame melewati anggaran waktunya, sedangkan versi transform tetap mulus. Pola perbaikan yang sama berlaku untuk batang kemajuan (progress bar) yang dianimasikan dari width, dan versi yang murah memperlebar batang melalui scaleX tanpa menyentuh geometrinya.

Disiplin penggunaan will-change#

Properti will-change memberi petunjuk kepada browser bahwa sebuah properti akan berubah, sehingga browser dapat menyiapkan optimasinya lebih awal, misalnya membentuk lapisan terpisah untuk elemen tersebut. Petunjuk ini bukan perintah mutlak, karena browser bebas mengabaikannya apabila dinilai tidak menguntungkan. Penempatan yang tepat adalah menambahkannya sesaat sebelum animasi berat dijalankan dan melepasnya setelah animasi selesai:

/* Class ini diterapkan sesaat sebelum animasi berat dimulai
   dan dilepas begitu animasinya selesai */
.peta-sedang-digeser {
  will-change: transform;
}

Setiap lapisan tambahan menempati memori tersendiri, sehingga petunjuk yang tersebar di mana-mana justru membebani halaman. Disiplinnya mencakup tiga hal, yaitu diberikan hanya untuk elemen yang benar-benar dianimasikan berat, ditambahkan mendekati waktu animasinya, dan dilepas setelah animasi selesai. Browser juga mengoptimasi sendiri animasi yang polanya sudah jelas, sehingga banyak kasus tidak memerlukan will-change sama sekali.

Mengukur dengan panel Performance#

Panel Performance pada DevTools browser Chromium memperlihatkan pekerjaan yang benar-benar terjadi selama animasi berjalan. Cara dasarnya, buka panel tersebut, tekan tombol rekam, jalankan animasinya selama beberapa detik, lalu hentikan perekamannya. Hasilnya berupa garis waktu yang menampilkan kepadatan frame, kejadian layout, serta proporsi waktu untuk scripting, rendering, dan painting.

Animasi yang sehat menampilkan frame yang rapat dan tidak ada kejadian layout selama animasinya berjalan. Apabila setiap frame memuat kejadian layout, ada properti layout yang teranimasi dan harus dipindahkan ke transform. Panel yang sama juga menyediakan emulasi throttling CPU, yaitu pembatasan daya hitung secara sengaja, sehingga animasi dapat diuji pada kondisi perangkat yang lebih lambat daripada mesin pengembangannya. Selain itu, menu Rendering menyediakan penghitung frame per detik yang dapat dibiarkan terbuka selama pengembangan, sehingga penurunan kehalusan terlihat tanpa perlu perekaman penuh.

Ringkasan#

• Perubahan gaya diproses melalui tahap layout, paint, dan compositing, dan semakin awal tahap yang terpicu semakin mahal biaya per frame.
• transform dan opacity umumnya hanya memicu compositing, sehingga keduanya menjadi pilihan utama untuk animasi yang halus.
• Animasi left, width, atau top pada perulangan menghitung ulang layout setiap frame, dan perbaikannya memindahkan gerak ke transform.
• will-change ditempatkan terbatas pada masa animasi berat lalu dilepas, dan panel Performance digunakan untuk memverifikasi hasilnya.

Referensi#

• will-change — MDN — Rujukan resmi properti will-change beserta catatan penggunaannya.
• CSS — MDN — Pintu masuk referensi CSS untuk menelusuri properti dan aturannya.
• Learn CSS — web.dev — Kursus resmi yang membahas kinerja perender dalam konteks CSS menyeluruh.