Animasi Ketinggian CSS Menggunakan 60% CPU pada MacBook M2, Mencetuskan Perdebatan Prestasi Web

Animasi ketinggian CSS yang ringkas dalam aplikasi nota Electron yang dipanggil Granola telah menggunakan 60% CPU dan 25% GPU yang membimbangkan pada MacBook M2, membawa kepada penyiasatan yang lebih mendalam mengenai pengoptimuman prestasi web. Punca masalah adalah visualizer audio kecil dengan tiga bar menari yang menggunakan transition: height 300ms ease in out untuk menganimasikan perubahan ketinggian mereka.

Perbandingan Kesan Prestasi:

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

Isu prestasi yang disebabkan oleh animasi ketinggian CSS dalam aplikasi pencatat nota

Saluran Rendering Pelayar Mencipta Kesesakan Prestasi

Isu prestasi ini berpunca daripada cara pelayar mengendalikan jenis sifat CSS yang berbeza semasa animasi. Apabila menganimasikan ketinggian, pelayar mesti mengira semula susun atur keseluruhan halaman, mengecat semula elemen yang terjejas, dan kemudian menggabungkan imej akhir. Ini menjadikan ketinggian sebagai sifat susun atur - jenis yang paling mahal untuk dianimasikan. Pembangun mendapati bahawa walaupun selepas pengoptimuman, ciri tersebut masih menggunakan 6% CPU, yang mana ramai dalam komuniti mendapati berlebihan untuk elemen visual yang begitu ringkas.

Saluran rendering mempunyai tiga fasa utama: Layout (memutuskan di mana elemen diletakkan), Painting (melukis elemen ke atas lapisan), dan Compositing (menggabungkan lapisan). Perubahan ketinggian mencetuskan ketiga-tiga fasa, manakala sifat seperti transform dan opacity hanya memerlukan compositing, menjadikannya lebih cekap.

Hierarki Prestasi Sifat CSS:

• Sifat Susun Atur (paling mahal): height, width, margin, padding - mencetuskan susun atur + cat + komposit
• Sifat Cat (sederhana): fill, stroke, colors - mencetuskan cat + komposit
• Sifat Komposit (paling murah): transform, opacity - mencetuskan komposit sahaja

Menganalisis lapisan rendering dan kesan prestasi yang berkaitan dengan animasi CSS

Komuniti Menentang Penggunaan Sumber

Komuniti pembangunan menyatakan kebimbangan yang kuat mengenai penggunaan sumber, walaupun selepas pengoptimuman. Ramai pembangun mempersoalkan mengapa aplikasi nota memerlukan animasi yang begitu intensif, mencadangkan alternatif yang lebih ringkas seperti GIF beranimasi atau ikon statik. Perbincangan mendedahkan kekecewaan yang lebih luas dengan amalan pembangunan web moden yang mengutamakan kesan visual berbanding kecekapan prestasi.

Saya lebih suka ia bertukar daripada titik 'recording' kelabu kepada merah daripada menggunakan walaupun 6% yang penulis putuskan sebagai 'diperbaiki'. Dalam 99% kes saya tidak peduli langsung tentang 'visi artistik' pereka UI.

Beberapa ahli komuniti mencadangkan penyelesaian peringkat pelayar untuk mengehadkan penggunaan sumber oleh laman web, termasuk mekanisme throttling CPU dan kawalan pengguna untuk melumpuhkan animasi yang mahal. Sesetengah pembangun berkongsi teknik seperti menggunakan sifat CSS contain atau bekas overflow: hidden untuk mengehadkan skop pengiraan semula susun atur.

Penyelesaian Alternatif yang Dicadangkan:

• Animated GIF (warisan tetapi cekap untuk animasi mudah)
• Rendering berasaskan Canvas
• Sifat CSS contain: strict atau contain: content
• Bekas overflow: hidden untuk mengehadkan skop susun atur
• Ikon statik sebagai ganti animasi

Penggunaan sumber dalam aplikasi pencatat nota, mendedahkan permintaan CPU dan GPU yang tinggi

Penyelesaian Alternatif dan Penyelesaian Teknikal

Pembangun akhirnya menyelesaikan masalah dengan mencipta ilusi menggunakan dua segi empat tepat bulat yang bergerak ke arah bertentangan dengan sifat transform, mengelakkan perubahan ketinggian sepenuhnya. Walau bagaimanapun, ramai ahli komuniti mencadangkan pendekatan yang lebih cekap, termasuk animasi berasaskan canvas, GIF ringkas, atau strategi containment CSS.

Perbincangan menyerlahkan jurang pengetahuan dalam komuniti pembangunan mengenai pengoptimuman rendering pelayar. Walaupun sesetengah pembangun menganggap ini sebagai pengetahuan asas, yang lain menegaskan bahawa pengoptimuman prestasi sering mengambil tempat belakang kepada pembangunan ciri dan reka bentuk visual dalam aliran kerja pembangunan web moden.

Insiden ini berfungsi sebagai peringatan bahawa animasi CSS yang kelihatan tidak bersalah boleh mempunyai kesan prestasi yang ketara, terutamanya dalam aplikasi Electron di mana setiap pengoptimuman penting untuk pengalaman pengguna dan hayat bateri.

Rujukan: Don't animate height!