7 Petua Prestasi untuk Animasi JavaScript Bebas Jank

mata utama

Untuk mendapatkan prestasi animasi yang lebih baik dan mengelakkan animasi sifat CSS yang mencetuskan pengeposan atau lukisan operasi, gunakan sifat yang telah dioptimumkan oleh pelayar moden, seperti
• dan transform. opacity
Unsur -unsur yang akan dinaikkan boleh dipromosikan ke lapisan mereka sendiri menggunakan atribut CSS
• , tetapi ini harus dilakukan dengan berhati -hati, kerana ia memerlukan memori dan pengurusan. will-change
Gantikan
• dengan requestAnimationFrame untuk mengurangkan risiko ketinggalan dan memastikan animasi yang lebih lancar, kerana kaedah ini melaksanakan kod animasi pada masa terbaik untuk penyemak imbas. setTimeout/setInterval
Untuk operasi lukisan kompleks dalam kanvas HTML5, gunakan kanvas luar skrin untuk meningkatkan prestasi dengan melakukan semua operasi lukisan pada kanvas luar skrin dan kemudian menarik kanvas luar skrin pada setiap bingkai.

Peranan animasi web telah berkembang dari kesan hiasan yang mudah kepada peranan tertentu dalam pengalaman pengguna -contohnya, memberikan maklum balas visual sebagai pengguna berinteraksi dengan aplikasi anda, membimbing pengguna untuk fokus untuk mencapai matlamat aplikasi, memberikan tip visual untuk membantu Pengguna memahami antara muka aplikasi, dll.

Untuk memastikan bahawa animasi web berkompeten untuk tugas -tugas kritikal ini, adalah penting bahawa pergerakan itu mesti dilakukan dengan lancar pada waktu yang tepat supaya pengguna dapat melihatnya sebagai bantuan daripada apa -apa yang menghalang mereka daripada berusaha untuk melaksanakan aplikasi .

Reka bentuk animasi yang buruk boleh membawa kepada kesan yang menjengkelkan - Jank, yang dijelaskan oleh jankfree.org:

Pelayar moden cuba menyegarkan kandungan pada skrin serentak dengan kadar refresh peranti. Bagi kebanyakan peranti hari ini, skrin menyegarkan 60 kali sesaat, atau 60Hz. Sekiranya terdapat pergerakan pada skrin (seperti menatal, peralihan, atau animasi), penyemak imbas harus membuat 60 bingkai sesaat untuk memadankan kadar penyegaran. Stutter adalah sebarang gagap, jitter, atau jeda mudah yang pengguna melihat apabila laman web atau aplikasi gagal bersaing dengan kadar penyegaran.

Jika animasi terjebak, pengguna akhirnya akan berinteraksi dengan aplikasi anda kurang dan kurang, yang akan menjejaskan kejayaannya. Jelas sekali, tiada siapa yang mahu itu.

Dalam artikel ini, saya telah mengumpul beberapa petua prestasi untuk membantu anda menyelesaikan masalah animasi JavaScript dan lebih mudah mencapai matlamat 60fps (bingkai sesaat), membolehkan gerakan lancar di rangkaian.

1.

sama ada anda bercadang untuk menggunakan kekunci kekunci CSS/CSS atau JavaScript untuk menghidupkan sifat CSS, memahami sifat mana yang menyebabkan geometri halaman berubah (susun atur) - yang bermaksud bahawa lokasi unsur -unsur lain di halaman mesti dikira semula, atau ia akan dikira semula, atau ia akan dikira semula, atau ia akan dikira semula, atau melibatkan operasi lukisan - ini sangat penting. Tugas susun atur dan lukisan sangat mahal untuk mengendalikan penyemak imbas, terutamanya apabila terdapat banyak elemen di halaman. Oleh itu, jika anda mengelakkan animasi sifat CSS yang mencetuskan pengeposan atau lukisan operasi dan melekat dengan sifat seperti transform dan opacity, anda akan melihat peningkatan yang ketara dalam prestasi animasi, kerana pelayar moden mengoptimumkan sifat -sifat ini dilakukan dengan sangat baik.

Pada pencetus CSS, anda boleh mencari senarai terkini sifat CSS yang mengandungi maklumat mengenai tindakan yang mereka cetus dalam setiap pelayar moden, termasuk perubahan pertama dan seterusnya.

Menukar sifat CSS yang mencetuskan operasi sintesis hanya adalah langkah yang mudah dan berkesan yang boleh anda ambil untuk mengoptimumkan prestasi animasi web.

2. Jika elemen yang dihidupkan adalah pada lapisan synthesizernya sendiri, beberapa pelayar moden akan menggunakan pecutan perkakasan untuk mengerjakan kerja ke GPU. Jika digunakan dengan betul, ini boleh memberi kesan positif terhadap prestasi animasi.

Untuk membuat elemen duduk di lapisan sendiri, anda perlu menaik tarafnya. Salah satu cara ialah menggunakan harta CSS

. Harta ini membolehkan pemaju memberi amaran kepada penyemak imbas terlebih dahulu bahawa mereka mahu membuat beberapa perubahan kepada elemen supaya pelayar dapat membuat pengoptimuman yang diperlukan terlebih dahulu.

Walau bagaimanapun, tidak disyorkan agar anda mengangkat terlalu banyak elemen ke lapisan mereka sendiri, atau berbuat demikian. Malah, setiap lapisan yang dicipta oleh penyemak imbas memerlukan memori dan pengurusan, yang boleh mahal. will-change

Anda boleh mengetahui lebih lanjut mengenai cara menggunakan

, kelebihan dan kekurangannya dalam pengenalan Nick Salloum kepada atribut CSS akan mengubah atribut.

will-change 3.

animasi JavaScript biasanya dikodkan menggunakan

atau . requestAnimationFrame setTimeout/setInterval kodnya adalah seperti berikut:

Walaupun ini berfungsi, risiko ketinggalan adalah tinggi, kerana fungsi panggil balik berjalan pada satu ketika dalam bingkai, yang mungkin pada akhirnya, yang boleh menyebabkan satu atau lebih bingkai hilang. Hari ini, anda boleh menggunakan kaedah JavaScript asli yang direka untuk animasi web yang lancar (animasi DOM, kanvas, dan lain -lain), yang dipanggil setInterval(). setTimeout()

Jalankan kod animasi anda pada masa yang terbaik untuk penyemak imbas, biasanya pada permulaan bingkai.

<code class="language-javascript">var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}</code>

kod anda mungkin kelihatan seperti ini:

<code class="language-javascript">var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}</code>

"Prestasi Kemas Kini Tim Evko dengan RequestAnimationFrame" di SitePoint menyediakan pengenalan video yang hebat mengenai pengekodan menggunakan requestAnimationFrame().

4. Dengan 60 bingkai sesaat, penyemak imbas hanya mempunyai 16.67ms setiap bingkai untuk melakukan tugasnya. Tidak banyak masa, jadi mengekalkan kod anda yang diselaraskan mungkin memberi kesan kepada kelancaran animasi anda.

kod decoupling yang mengendalikan menatal, mengubah saiz, peristiwa tetikus dan peristiwa lain dari kod yang menggunakan

untuk mengendalikan kemas kini skrin adalah cara yang baik untuk mengoptimumkan prestasi kod animasi.

requestAnimationFrame() Untuk perbincangan yang mendalam tentang tip pengoptimuman ini dan kod sampel yang berkaitan, lihat Paul Lewis 'membuat animasi yang lebih kuat, lebih berkuasa, dan lebih cepat dengan RequestAnimationFrame.

5.

Pelayar menggunakan benang utama untuk menjalankan JavaScript, serta tugas lain seperti pengiraan gaya, susun atur, dan operasi lukisan. Kod JavaScript yang lama boleh menjejaskan tugas-tugas ini secara negatif, yang boleh menyebabkan bingkai dilangkau dan menyebabkan kegagapan animasi. Oleh itu, memudahkan kod anda pastinya merupakan cara yang baik untuk memastikan animasi anda berjalan lancar. Untuk operasi JavaScript kompleks yang tidak memerlukan akses kepada DOM, pertimbangkan untuk menggunakan pekerja web. Benang pekerja melakukan tugasnya tanpa menjejaskan antara muka pengguna.

6.

Alat pemaju penyemak imbas menyediakan cara untuk memantau kesukaran penyemak imbas yang menjalankan kod JavaScript anda atau perpustakaan pihak ketiga. Mereka juga memberikan maklumat praktikal mengenai kadar bingkai dan banyak lagi.

Anda boleh mengakses Chrome Devtools dengan mengklik kanan pada halaman web dan memilih semak dalam menu konteks. Sebagai contoh, menggunakan alat prestasi untuk merakam laman web anda akan memberi anda pemahaman yang mendalam tentang kesesakan prestasi pada halaman tersebut:

Klik butang "Rekod" dan berhenti rakaman selepas beberapa saat:

Pada ketika ini, anda harus mempunyai banyak data untuk membantu anda menganalisis prestasi halaman anda:

Panduan Chrome DevTools ini akan membantu anda memanfaatkan sepenuhnya DevTools untuk menganalisis prestasi dan banyak jenis data lain dalam pelayar Chrome anda. Jika Chrome bukan penyemak imbas pilihan anda, tidak mengapa, kerana kebanyakan pelayar moden hari ini datang dengan DevTools yang kuat yang boleh anda gunakan untuk mengoptimumkan kod anda.

7.

Teknik ini secara khusus berkaitan dengan mengoptimumkan kod kanvas HTML5.

Jika bingkai anda melibatkan operasi lukisan kompleks, idea yang baik adalah melakukan semua operasi lukisan sekali atau hanya sekali apabila perubahan berlaku, dan kemudian lukiskan kanvas luar skrin pada setiap bingkai.

anda boleh mencari maklumat terperinci dan contoh kod dan lebih lanjut mengenai tip ini dalam artikel kanvas pengoptimuman MDN.

Kesimpulan

Mengoptimumkan prestasi kod adalah tugas yang diperlukan jika anda tidak mahu memenuhi jangkaan pengguna pada rangkaian hari ini, tetapi ia tidak mudah. Mungkin terdapat beberapa sebab untuk prestasi animasi yang lemah, tetapi jika anda cuba menggunakan petua yang disenaraikan di atas, anda akan mengambil langkah besar ke arah mengelakkan perangkap prestasi animasi yang paling biasa, meningkatkan pengalaman pengguna laman web atau aplikasi anda.

Soalan Lazim (FAQ) pada Animasi JavaScript Tanpa Lags

Apakah konsep "gagap" dalam animasi JavaScript?

"gagap" merujuk kepada sebarang gagap, jitter, atau jeda mudah yang dilihat oleh pengguna apabila laman web atau aplikasi gagal bersaing dengan kadar penyegaran. Dalam animasi JavaScript, ketinggalan mungkin berlaku apabila kadar bingkai berada di bawah 60 bingkai standard sesaat. Ini boleh menyebabkan animasi yang kurang lancar dan kurang menarik secara visual, yang boleh menjejaskan pengalaman pengguna secara negatif.

Bagaimana untuk memastikan animasi JavaScript yang lancar?

Membuat animasi JavaScript Smooth melibatkan mengoptimumkan kod untuk mengekalkan 60 bingkai yang stabil sesaat. Ini boleh dicapai dengan menggunakan kaedah

, yang membolehkan penyemak imbas mengoptimumkan animasi. Anda juga boleh menggunakan peralihan CSS atau animasi untuk animasi mudah, kerana mereka umumnya lebih cekap daripada JavaScript. Di samping itu, susun atur susun atur dielakkan dengan mengikat operasi membaca dan menulis DOM bersama -sama. requestAnimationFrame

Apakah peranannya dalam animasi JavaScript? requestAnimationFrame

Kaedah

dalam JavaScript adalah alat utama untuk membuat animasi yang lancar. Ia memberitahu penyemak imbas bahawa anda mahu animasi dilaksanakan dan meminta penyemak imbas untuk memanggil fungsi yang ditentukan untuk mengemas kini animasi sebelum mengecat semula seterusnya. Kaedah ini membolehkan penyemak imbas mengoptimumkan animasi, menghasilkan animasi yang lebih lancar dan lebih cekap. requestAnimationFrame

Mengapa peralihan atau animasi CSS lebih cekap daripada JavaScript?

peralihan dan animasi CSS mungkin lebih cekap daripada JavaScript kerana ia diproses oleh benang synthesizer penyemak imbas dan dipisahkan dari thread JavaScript utama. Ini bermakna walaupun benang utama sibuk dengan tugas -tugas lain, mereka boleh berjalan lancar. Di samping itu, sifat -sifat tertentu boleh dihidupkan dalam CSS tanpa menyebabkan redrawing, yang menjadikannya sangat cekap.

Apakah susun atur susun atur dan bagaimana untuk mengelakkannya dalam animasi JavaScript?

Jitter Layout merujuk kepada JavaScript berulang kali membaca dan menulis ke DOM, menyebabkan penyemak imbas untuk mengira semula susun atur beberapa kali, mengakibatkan animasi yang tidak cekap dan gagap. Ini boleh dielakkan dengan membatalkan operasi dan menulis operasi bersama. Sebagai contoh, anda boleh melakukan semua bacaan dan kemudian semua menulis dan bukannya membaca dan menulis.

bagaimana menggunakan pengoptimuman atribut animasi javascript? will-change Harta

di CSS membolehkan anda memaklumkan penyemak imbas terlebih dahulu apa jenis perubahan yang mungkin anda inginkan ke elemen supaya ia dapat menetapkan pengoptimuman yang sesuai sebelum perlu. Ini dapat meningkatkan prestasi animasi dengan ketara. Walau bagaimanapun, gunakannya dengan berhati -hati, kerana penggunaan berlebihan boleh menyebabkan penyemak imbas menghabiskan terlalu banyak masa mengoptimumkan.

Apakah yang dimaksudkan dengan sifat -sifat will-change

dan dalam animasi JavaScript?

Ciri -ciri transform dan opacity dalam

CSS sangat cekap untuk animasi. Ini kerana perubahan kepada sifat -sifat ini boleh dikendalikan oleh benang synthesizer penyemak imbas tanpa susun atur atau lukisan. Ini bermakna mereka boleh berjalan lancar walaupun benang JavaScript utama sibuk.

transform Bagaimana menggunakan pekerja web untuk meningkatkan prestasi animasi JavaScript? opacity

Pekerja Web di JavaScript membolehkan anda menjalankan skrip di latar belakang, terpisah dari benang pelaksanaan utama. Ini bermakna mereka boleh mengendalikan tugas-tugas intensif tanpa menyekat benang utama dan menyebabkan lag. Walau bagaimanapun, mereka mempunyai beberapa batasan, seperti ketidakupayaan untuk mengakses DOM atau beberapa API web.

Apakah animasi "bukan benang utama" dan bagaimana ia memberi manfaat kepada animasi JavaScript?

Animasi "Benang Bukan Main" merujuk kepada menjalankan animasi pada benang berasingan yang berasingan dari thread JavaScript utama. Ini dapat meningkatkan prestasi animasi dengan ketara, kerana ia membolehkan mereka berjalan lancar walaupun benang utama sibuk. Ini boleh dicapai dengan menggunakan animasi CSS, pekerja web, atau API animasi web.

Bagaimana untuk membuat animasi JavaScript yang cekap menggunakan API Animasi Web?

API Animasi Web menyediakan cara untuk membuat animasi menggunakan JavaScript, yang berfungsi dengan cekap sebagai animasi CSS. Ia membolehkan anda mengawal dan memanipulasi animasi secara langsung dari JavaScript, memberikan anda fleksibiliti yang lebih besar daripada animasi CSS. Walau bagaimanapun, ia masih merupakan teknologi eksperimen dan tidak disokong sepenuhnya oleh semua pelayar.

Atas ialah kandungan terperinci 7 Petua Prestasi untuk Animasi JavaScript Bebas Jank. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!