Menguasai Animasi Web: CSS lwn Prestasi JavaScript Tidak Dioptimumkan dan Dioptimumkan

Animasi web boleh meningkatkan pengalaman pengguna dengan ketara tetapi juga boleh memberi kesan kepada prestasi tapak web jika tidak dilaksanakan dengan berhati-hati. Dalam artikel ini, saya akan membandingkan tiga pendekatan berbeza untuk menghidupkan elemen bulatan yang berdenyut dalam saiz. Saya akan menggunakan CSS, JavaScript tidak dioptimumkan dan JavaScript yang dioptimumkan, dan saya akan menunjukkan kepada anda cara mengukur prestasi mereka menggunakan Chrome DevTools.

Pengenalan kepada Animasi Web

Animasi ialah bahagian penting dalam reka bentuk web moden. Ia boleh dilaksanakan menggunakan pelbagai kaedah, paling biasa dengan CSS atau JavaScript tulen. Walau bagaimanapun, tidak semua kaedah berfungsi dengan baik. Untuk menunjukkan ini, saya memutuskan untuk menguji tiga pendekatan berbeza:

• Animasi yang dibuat dengan CSS.
• Animasi tidak dioptimumkan menggunakan JavaScript.
• Animasi yang dioptimumkan menggunakan JavaScript dengan requestAnimationFrame.

Menyediakan Projek

Projek ini tersedia di GitHub. Anda boleh memuat turun dan mencubanya dengan mudah.

klon git https://github.com/TomasDevs/animation-performance-test.git
cd animasi-ujian-prestasi

Setelah anda memuat turunnya, semak folder css-animation, js-animation-optimized dan js-animation-unoptimized.

Cuba projek di GitHub

Mengukur Prestasi

Untuk mengukur prestasi, saya menggunakan panel Prestasi Chrome DevTools. Setiap animasi dijalankan selama 10 saat.

Keputusan dan Analisis Prestasi

Animasi CSS

Sumber: Dicipta oleh TomasDevs (2024)

• Jumlah Masa Penyekatan: 390 ms

Nota:
Animasi CSS cenderung berprestasi lebih baik kerana ia dimuat turun ke enjin pemaparan asli penyemak imbas, terutamanya apabila berfungsi dengan sifat seperti perubahan atau kelegapan. Animasi ini sangat cekap dengan impak minimum pada masa skrip dan pemaparan.

Animasi JavaScript Dioptimumkan

Sumber: Dicipta oleh TomasDevs (2024)

• Jumlah Masa Penyekatan: 400 ms

Nota:
Versi JS yang dioptimumkan menggunakan requestAnimationFrame dan fungsi gelombang sinus yang lancar untuk mengurus animasi. Walaupun memerlukan lebih banyak masa skrip berbanding animasi CSS, ia masih berjalan dengan agak cekap dan mengekalkan masa pemaparan dan lukisan yang rendah.

Animasi JavaScript tidak dioptimumkan

Sumber: Dicipta oleh TomasDevs (2024)

• Jumlah Masa Penyekatan: 440 ms

Nota:
Versi JS yang tidak dioptimumkan menggunakan gelung mudah tanpa pertimbangan untuk kemajuan masa. Ini membawa kepada masa skrip, pemaparan dan lukisan yang lebih tinggi disebabkan pengiraan yang tidak cekap untuk setiap bingkai animasi.

Kesimpulan

• Animasi CSS ialah keseluruhan yang paling cekap untuk animasi ringkas. Mereka mendapat manfaat daripada pecutan perkakasan oleh penyemak imbas dan mengurangkan beban pada utas utama.
• Animasi JavaScript Dioptimumkan adalah detik terdekat. Apabila anda memerlukan kawalan yang lebih dinamik ke atas animasi, mengoptimumkan dengan requestAnimationFrame adalah penting untuk memastikan prestasi lancar.
• Animasi JavaScript tidak dioptimumkan melakukan yang paling teruk, kerana ia memberi tekanan yang tidak perlu pada enjin pemaparan penyemak imbas disebabkan pengiraan yang tidak cekap.

Sertai Perbincangan

Apakah pengalaman anda dengan mengoptimumkan animasi web? Adakah anda mempunyai sebarang petua atau helah tambahan untuk meningkatkan prestasi? Beritahu saya dalam ulasan di bawah!

Atas ialah kandungan terperinci Menguasai Animasi Web: CSS lwn Prestasi JavaScript Tidak Dioptimumkan dan Dioptimumkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!