Animasi Height CSS Mengonsumsi 60% CPU pada MacBook M2, Memicu Perdebatan Performa Web

Sebuah animasi height CSS sederhana dalam aplikasi pencatat berbasis Electron bernama Granola mengonsumsi 60% CPU dan 25% GPU yang mengkhawatirkan pada MacBook M2, yang kemudian memicu investigasi lebih mendalam tentang optimasi performa web. Penyebabnya adalah visualizer audio kecil dengan tiga bar yang bergerak menggunakan transition: height 300ms ease in out untuk menganimasikan perubahan tingginya.

Perbandingan Dampak Performa:

• Sebelum optimisasi: 60% CPU, 25% GPU pada MacBook M2
• Setelah optimisasi: 6% CPU, <1% GPU pada MacBook M2
• Rincian rendering: Sistem 47ms, Rendering 45ms, Painting 20ms, Scripting 13ms

Masalah performa yang disebabkan oleh animasi tinggi CSS dalam aplikasi pencatat

Pipeline Rendering Browser Menciptakan Bottleneck Performa

Masalah performa ini berasal dari cara browser menangani berbagai jenis properti CSS selama animasi. Ketika menganimasikan height, browser harus menghitung ulang layout seluruh halaman, menggambar ulang elemen yang terpengaruh, dan kemudian menggabungkan gambar akhir. Hal ini membuat height menjadi properti layout - jenis yang paling mahal untuk dianimasikan. Developer menemukan bahwa bahkan setelah optimasi, fitur tersebut masih mengonsumsi 6% CPU, yang dianggap berlebihan oleh banyak orang di komunitas untuk elemen visual yang begitu sederhana.

Pipeline rendering memiliki tiga fase utama: Layout (menentukan di mana elemen ditempatkan), Painting (menggambar elemen ke dalam layer), dan Compositing (menggabungkan layer). Perubahan height memicu ketiga fase tersebut, sementara properti seperti transform dan opacity hanya memerlukan compositing, membuatnya jauh lebih efisien.

Hierarki Performa Properti CSS:

• Properti Layout (paling mahal): height, width, margin, padding - memicu layout + paint + composite
• Properti Paint (sedang): fill, stroke, colors - memicu paint + composite
• Properti Composite (paling murah): transform, opacity - hanya memicu composite

Menganalisis layer rendering dan dampak performa yang terkait dengan animasi CSS

Komunitas Menolak Penggunaan Resource yang Berlebihan

Komunitas developer mengungkapkan kekhawatiran kuat tentang konsumsi resource, bahkan setelah optimasi. Banyak developer mempertanyakan mengapa aplikasi pencatat memerlukan animasi yang begitu intensif, dan menyarankan alternatif yang lebih sederhana seperti GIF animasi atau ikon statis. Diskusi ini mengungkap frustrasi yang lebih luas terhadap praktik pengembangan web modern yang memprioritaskan efek visual daripada efisiensi performa.

Saya lebih memilih untuk beralih dari titik abu-abu ke merah 'recording' daripada menggunakan bahkan 6% yang penulis anggap sudah 'diperbaiki'. Dalam 99% kasus, saya sama sekali tidak peduli dengan 'visi artistik' dari UI designer.

Beberapa anggota komunitas mengusulkan solusi tingkat browser untuk membatasi konsumsi resource oleh website, termasuk mekanisme throttling CPU dan kontrol pengguna untuk menonaktifkan animasi yang mahal. Beberapa developer berbagi teknik seperti menggunakan properti CSS contain atau container overflow: hidden untuk membatasi ruang lingkup perhitungan ulang layout.

Solusi Alternatif yang Disarankan:

• Animated GIF (lawas tapi efisien untuk animasi sederhana)
• Rendering berbasis Canvas
• Properti CSS contain: strict atau contain: content
• Kontainer overflow: hidden untuk membatasi cakupan layout
• Ikon statis sebagai pengganti animasi

Penggunaan sumber daya dalam aplikasi pencatat, menunjukkan kebutuhan CPU dan GPU yang tinggi

Solusi Alternatif dan Workaround Teknis

Developer akhirnya menyelesaikan masalah dengan menciptakan ilusi menggunakan dua persegi panjang bulat yang bergerak ke arah berlawanan dengan properti transform, menghindari perubahan height sepenuhnya. Namun, banyak anggota komunitas menyarankan pendekatan yang bahkan lebih efisien, termasuk animasi berbasis canvas, GIF sederhana, atau strategi CSS containment.

Diskusi ini menyoroti kesenjangan pengetahuan dalam komunitas developer mengenai optimasi rendering browser. Meskipun beberapa developer menganggap ini sebagai pengetahuan dasar, yang lain menunjukkan bahwa optimasi performa sering kali dikesampingkan demi pengembangan fitur dan desain visual dalam alur kerja pengembangan web modern.

Insiden ini berfungsi sebagai pengingat bahwa animasi CSS yang tampaknya tidak berbahaya dapat memiliki dampak performa yang signifikan, terutama dalam aplikasi Electron di mana setiap optimasi penting untuk pengalaman pengguna dan daya tahan baterai.

Referensi: Don't animate height!