Mengoptimumkan CSS: Tweak Prestasi Animasi dengan DevTools

Panduan Pengoptimuman Prestasi Animasi CSS: Menggunakan alat pemaju penyemak imbas untuk meningkatkan kelancaran animasi

Artikel ini dibuat dengan kerjasama SiteGround. Terima kasih kepada rakan kongsi kami yang menyokong SitePoint.

Seperti yang kita semua tahu, prestasi animasi CSS biasanya sangat tinggi. Walau bagaimanapun, untuk adegan yang mengandungi sejumlah besar elemen atau animasi kompleks, jika kod itu tidak dioptimumkan untuk prestasi, ia akan menyebabkan animasi digagalkan dan mempengaruhi pengalaman pengguna.

Artikel ini akan memperkenalkan beberapa ciri alat pemaju pelayar praktikal untuk membantu anda menyemak mekanisme berjalan di sebalik animasi CSS. Apabila animasi terperangkap, anda dapat lebih memahami sebab -sebabnya dan membetulkannya.

mata utama

Gunakan alat pemaju penyemak imbas untuk mengoptimumkan prestasi animasi CSS, mengenal pasti masalah yang menyebabkan lag animasi, dan mendapatkan wawasan tentang operasi animasi yang mendasari. Alat ini boleh menyemak kadar bingkai, mengkaji, mengedit, dan kod debug, dan menganalisis susun atur dan lukisan operasi yang boleh menjejaskan prestasi.
Untuk mendapatkan kesan animasi yang lancar, kadar bingkai sasaran harus mencapai 60fps (bingkai sesaat). Untuk memastikan animasi yang lebih lancar, hanya kelegapan, mengubah dan penapis CSS adalah animasi. Animasi sifat lain boleh memberi tekanan pada penyemak imbas, memaksa ia melakukan tugas yang mahal dalam masa yang sangat singkat, mengakibatkan hasil yang buruk.
Gunakan atribut CSS
• , atau will-change dan translateZ(0) untuk memaksa penyemak imbas untuk menyerahkan beberapa perubahan harta kepada GPU (unit pemprosesan grafik) untuk pemprosesan. Ini mengambil kesempatan daripada pecutan perkakasan dan melegakan beberapa tekanan pada benang penyemak imbas utama. Walau bagaimanapun, berlebihan boleh menyebabkan masalah yang anda cuba elakkan, seperti kegagapan animasi. translate3d(0,0,0)

alat pemaju dan analisis prestasi CSS

Animasi anda perlu mencapai 60fps untuk berjalan lancar dalam penyemak imbas. Semakin rendah kadar bingkai, semakin buruk kesan animasi. Ini bermakna penyemak imbas hanya mempunyai kira -kira 16 milisaat setiap bingkai untuk melakukan tugasnya. Tetapi apa yang dilakukannya pada masa ini? Bagaimana anda tahu jika penyemak imbas anda terus dengan framerate yang diperlukan?

Saya fikir tidak ada yang lebih penting daripada pengalaman pengguna ketika menilai kualiti animasi. Walau bagaimanapun, sementara alat pemaju penyemak imbas moden tidak selalu 100% boleh dipercayai, mereka menjadi lebih bijak dan anda boleh menggunakannya untuk mengkaji, mengedit, dan debug kod anda.

sama benar apabila anda perlu menyemak kadar bingkai dan prestasi animasi CSS. Inilah cara ia berfungsi.

Eksplorasi Alat Prestasi Firefox

Dalam artikel ini, saya menggunakan alat prestasi Firefox. Satu lagi pesaing utama ialah alat prestasi Chrome. Anda boleh memilih alat kegemaran anda kerana kedua -dua pelayar menawarkan ciri prestasi yang kuat.

Untuk membuka alat pemaju di Firefox, pilih salah satu pilihan berikut:

• Klik kanan pada halaman web anda dan pilih Elemen Semak dalam menu konteks.
• atau gunakan pintasan papan kekunci: tekan CTRL SHIFT I pada Windows dan Linux, dan CMD OPT I pada macOS.

Seterusnya, klik tab Prestasi. Di sini anda akan menemui butang yang akan membolehkan anda mula merakam data prestasi laman web anda:

Tekan butang ini dan tunggu beberapa saat, atau lakukan beberapa tindakan pada halaman. Apabila selesai, klik butang "Stop Prestasi Rakaman":

seketika, Firefox akan membentangkan anda dengan banyak data yang teratur untuk membantu anda memahami masalah apa dalam kod anda.

Hasil rakaman dalam panel prestasi adalah seperti berikut:

Bahagian "Air Terjun" sangat bagus untuk memeriksa isu -isu yang berkaitan dengan peralihan CSS dan animasi kerangka utama. Bahagian lain adalah "Pohon Panggilan" dan "JS Flame Graph", yang boleh anda gunakan untuk mencari kesesakan dalam kod JavaScript.

Pandangan aliran air terjun mempunyai seksyen ringkasan dan pecahan terperinci di bahagian atas. Pada kedua-duanya, data dikodkan warna:

• Bar Yellow menunjukkan operasi JavaScript.
• Bar ungu mewakili gaya CSS (gaya recryculate) dan susun atur halaman (susun atur) yang mengira unsur -unsur HTML. Operasi susun atur agak mahal untuk penyemak imbas, jadi jika anda menghidupkan sifat yang melibatkan susun atur pendua (juga dikenali sebagai "reflow" - contohnya margin, padding, top, left,
,
• , dan sebagainya), hasilnya boleh digagalkan. color background-color Bar hijau menunjukkan bahawa elemen ditarik ke dalam satu atau lebih bitmaps (lukisan). Atribut animasi seperti box-shadow,
,

dan atribut lain melibatkan operasi lukisan mahal, yang mungkin menjadi sebab animasi perlahan dan pengalaman pengguna yang lemah.

anda juga boleh menapis jenis data untuk diperiksa. Sebagai contoh, saya hanya berminat dengan data yang berkaitan

Bar hijau di bawah ringkasan aliran air terjun menunjukkan maklumat kadar bingkai.

Ekspresi yang sihat harus kelihatan agak tinggi, tetapi yang paling penting konsisten -iaitu, tidak banyak jurang yang mendalam.

mari kita menggambarkan ini dengan contoh.

Pertempuran Alat Praktikal

@keyframes Ini adalah animasi CSS yang mudah menggunakan kata kunci

. Halaman ujian kelihatan seperti ini:

Slaid bingkai ungu segi empat tepat masuk dan keluar dari pandangan dalam gelung tak terhingga.

Saya melakukan ini dengan animasi yang mewakili atribut <div> dari elemen <code>margin-left kotak segi empat tepat pada skrin. @keyframes blok animasi adalah seperti berikut:

@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}

Data prestasi yang saya dapat dari animasi ini adalah seperti berikut:

Visualisasi kadar bingkai kelihatan sedikit tidak sekata, dengan kadar bingkai purata 44.82fps, yang agak rendah.

Juga, perhatikan semua susun atur dan lukisan operasi yang berlaku semasa proses animasi. Ini adalah tindakan yang mahal yang dilakukan oleh penyemak imbas pada benang utamanya, yang memberi kesan negatif terhadap prestasi.

Akhirnya, jika anda mengakses alat Inspektor, klik pada bahagian animasi, dan kemudian hover di atas nama animasi, kotak maklumat akan muncul dengan semua data yang relevan mengenai animasi semasa. Jika animasi anda dioptimumkan, mesej yang menerangkan fakta dipaparkan. Dalam kes ini, tiada mesej:

Sekarang, saya akan menukar kod saya dan melakukan rakaman baru, kerana penyemak imbas menggunakan blok @keyframes ini untuk menghidupkan sifat CSS translate3d():

@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}

ini adalah imej yang direkodkan dalam prestasi:

Kadar bingkai kini lebih tinggi (56.83fps), dan aliran air terjun tidak menunjukkan susun atur dan operasi lukisan yang mahal.

Juga, jika anda membuka tab "Inspektor" alat pemaju, akses panel "animasi" dan hover atas nama animasi, anda akan melihat sesuatu seperti ini:

Kotak Info yang dikaitkan dengan nama animasi menunjukkan bahawa semua animasi dioptimumkan, yang merupakan berita baik untuk pelawat laman web anda.

Animate Only

, opacity dan transforms filters css

anda mungkin pernah mendengar cadangan ini sebelum ini, tetapi sekiranya ia patut dibicarakan sekali lagi: jika anda mahu animasi berjalan lancar, anda hanya akan mempunyai kelegapan, transformasi, dan penapis untuk CSS (penapis) untuk menetapkan animasi kesan. Animasi segala -galanya boleh memberi tekanan pada penyemak imbas, memaksa ia melakukan tugas yang mahal dalam masa yang sangat singkat, yang biasanya tidak menghasilkan hasil yang terbaik.

Sebagai alat prestasi dalam penyemak imbas telah terbukti, susun atur berulang dan operasi lukisan bukan kawan anda.

Walau bagaimanapun, setiap penyemak imbas mengendalikan sifat CSS sedikit berbeza. Jika anda ingin mengetahui pelayar mana yang akan mencetuskan penerbitan dan lukisan operasi yang mana sifatnya (terutamanya apabila mengemas kini nilai -nilai sifat -sifat ini, yang terlibat dalam animasi web), lawati pencetus CSS.

Untuk memastikan prestasi animasi, pendekatan yang popular adalah untuk memaksa penyemak imbas untuk menyerahkan beberapa perubahan harta kepada GPU (unit pemprosesan grafik), yang melegakan beberapa tekanan pada benang utama penyemak imbas dan mengambil kesempatan daripada pecutan perkakasan. Anda boleh menggunakan atribut CSS will-change, atau teknik translateZ(0) dan translate3d(0,0,0) untuk mencapainya. Semua petua ini berfungsi, tetapi jika anda terlalu banyak, anda mungkin mendapat hasil yang anda cuba elakkan, iaitu gagap animasi.

Saya tidak berhasrat untuk terperinci mengenai pecutan perkakasan untuk prestasi animasi web, tetapi jika anda ingin menggali lebih mendalam, lihat sumber yang disenaraikan di bawah.

Sumber

• Animasi Prestasi Tinggi oleh Paul Lewis dan Paul Irish
• Animasi dan Peralihan CSS Prestasi: Melihat di dalam penyemak imbas oleh Max Vujovic
• Animasi dan Prestasi oleh Paul Lewis dan Sam Thorogood
• melekat pada sifat kompositor sahaja dan menguruskan kiraan lapisan oleh Paul Lewis
• Trik untuk CSS yang disusun oleh GPU oleh Sara Soueidan
• Pengenalan kepada harta CSS Will-gang oleh Nick Salloum
• Animasi CSS Properties oleh MDN

Soalan Lazim Mengenai Prestasi Animasi CSS (Soalan Lazim)

Apakah faktor utama yang mempengaruhi prestasi animasi CSS?

Prestasi animasi CSS dipengaruhi oleh pelbagai faktor. Kerumitan animasi, bilangan elemen yang dihidupkan, dan sifat -sifat yang animasi akan berfungsi. Animasi sifat seperti transform dan opacity cenderung untuk melakukan lebih baik kerana mereka tidak mencetuskan penerbitan atau lukisan operasi. Walau bagaimanapun, sifat animasi seperti width, height, atau margin boleh menyebabkan susun atur susun atur dan redraws, yang melambatkan animasi. Di samping itu, perkakasan peranti dan enjin rendering penyemak imbas juga akan menjejaskan prestasi animasi CSS.

Bagaimana untuk mengukur prestasi animasi CSS?

Anda boleh menggunakan alat pemaju penyemak imbas untuk mengukur prestasi animasi CSS. Sebagai contoh, dalam Chrome, anda boleh menggunakan tab Prestasi untuk merakam dan menganalisis runtime animasi anda. Alat ini memberikan pecahan terperinci penggunaan masa dalam kitaran hayat animasi untuk membantu anda mengenal pasti sebarang kesesakan prestasi.

Apakah kadar bingkai yang ideal untuk animasi CSS yang lancar?

Kadar bingkai yang ideal untuk animasi lancar ialah 60 bingkai sesaat (FPS). Ini kerana kebanyakan peranti menyegarkan skrin 60 kali sesaat. Oleh itu, untuk membuat animasi yang lancar, anda harus menyasarkan mengemas kini animasi setiap 16.67 milisaat (1 saat/60), yang sepadan dengan 60fps.

Bagaimana untuk mengoptimumkan animasi CSS untuk prestasi yang lebih baik?

Terdapat pelbagai strategi untuk mengoptimumkan animasi CSS untuk prestasi yang lebih baik. Pendekatan yang sama adalah untuk sifat animasi yang tidak mencetuskan pengeposan atau menarik operasi, seperti transform dan opacity. Di samping itu, mengurangkan bilangan elemen yang menjadi animasi dan memudahkan animasi juga dapat meningkatkan prestasi. Menggunakan atribut will-change juga boleh membantu penyemak imbas mengoptimumkan animasi dengan mendorong untuk sifat -sifat yang mungkin animasi.

Apakah perbezaan antara animasi CSS dan animasi JavaScript dari segi prestasi?

Animasi CSS biasanya melakukan lebih baik daripada animasi JavaScript. Ini kerana animasi CSS berjalan pada enjin rendering penyemak imbas, berasingan dari benang JavaScript utama. Ini bermakna walaupun benang JavaScript sibuk, animasi CSS masih boleh berjalan lancar. Walau bagaimanapun, animasi JavaScript memberikan lebih banyak kawalan dan fleksibiliti, yang boleh memberi manfaat kepada animasi yang kompleks.

Bagaimana pecutan perkakasan mempengaruhi prestasi animasi CSS?

Percepatan perkakasan dapat meningkatkan prestasi animasi CSS dengan ketara. Apabila pecutan perkakasan diaktifkan, penyemak imbas melepaskan beberapa tugas rendering ke GPU peranti, membebaskan CPU untuk mengendalikan tugas lain. Ini boleh membawa kepada animasi yang lebih lancar, terutamanya dalam animasi kompleks atau animasi yang melibatkan sejumlah besar elemen.

requestAnimationFrame Apakah peranan yang dimainkan oleh fungsi dalam prestasi animasi?

Fungsi

requestAnimationFrame adalah kaedah JavaScript yang membolehkan animasi yang lebih efisien dengan memanggil fungsi yang ditentukan sebelum mengecat semula. Ini bermakna animasi boleh disegerakkan dengan kadar penyegaran peranti, menghasilkan animasi yang lebih lancar. Ia juga membolehkan penyemak imbas mengoptimumkan animasi, mengurangkan penggunaan CPU dan meningkatkan prestasi.

Bagaimana menggunakan panel prestasi DevTools untuk meningkatkan prestasi animasi CSS?

Panel Prestasi di DevTools menyediakan pecahan terperinci penggunaan masa dalam kitaran hayat animasi. Dengan menganalisis data ini, anda boleh mengenal pasti sebarang kesesakan prestasi dan mengoptimumkan animasi dengan sewajarnya. Sebagai contoh, jika banyak masa dibelanjakan untuk melukis, anda mungkin ingin mempertimbangkan sifat -sifat bahawa animasi tidak mencetuskan operasi lukisan.

Apakah kesan susun atur susun atur pada prestasi animasi CSS?

Jitter Layout merujuk kepada keadaan di mana penyemak imbas mesti berulang kali mengira maklumat susun atur kerana perubahan dalam DOM. Ini serius boleh menjejaskan prestasi animasi CSS, menyebabkan animasi berjalan perlahan atau menyebabkan gagap. Untuk mengelakkan susun atur susun atur, cuba batching Dom membaca dan menulis operasi bersama -sama dan elakkan animasi untuk mencetuskan sifat -sifat operasi penerbitan.

Bagaimana menggunakan atribut CSS will-change untuk meningkatkan prestasi animasi?

will-change Properties membolehkan anda memaklumkan penyemak imbas terlebih dahulu dari sifat yang anda merancang untuk animasi. Ini membolehkan penyemak imbas melakukan pengoptimuman yang diperlukan sebelum animasi bermula, yang mungkin mengakibatkan animasi yang lebih lancar. Walau bagaimanapun, atribut will-change hendaklah digunakan dengan berhati -hati, kerana terlalu banyak boleh menyebabkan penyemak imbas menggunakan lebih banyak sumber dan menjejaskan prestasi.

(sila ambil perhatian bahawa semua pautan di atas perlu diganti dengan pautan sebenar)