Pemahaman mendalam tentang penggunaan timer HTML5 requestAnimationFrame

Pengatur waktu selalu menjadi teknologi inti animasi JavaScript. Kunci untuk menulis loop animasi adalah mengetahui berapa lama waktu tundanya. Di satu sisi, interval loop harus cukup pendek untuk membuat efek animasi yang berbeda tampak mulus; di sisi lain, interval loop harus cukup panjang untuk memastikan bahwa browser memiliki kemampuan untuk merender perubahan yang dihasilkan.

Kecepatan refresh sebagian besar monitor komputer adalah 60Hz, yang kira-kira setara dengan 60 gambar ulang per detik. Kebanyakan browser akan membatasi operasi menggambar ulang tidak lebih dari frekuensi menggambar ulang tampilan, karena bahkan melebihi frekuensi tersebut pengalaman pengguna tidak akan ditingkatkan. Oleh karena itu, interval loop optimal untuk animasi paling halus adalah 1000 md/60, yang kira-kira sama dengan 16,6 md.

Masalah dengan setTimeout dan setInterval adalah keduanya tidak tepat. Mekanisme operasi internalnya menentukan bahwa parameter interval waktu sebenarnya hanya menentukan waktu untuk menambahkan kode animasi ke antrian thread UI browser untuk menunggu eksekusi. Jika tugas lain telah ditambahkan ke antrian depan, kode animasi harus menunggu hingga tugas sebelumnya selesai sebelum menjalankannya.

requestAnimationFrame menggunakan interval waktu sistem untuk menjaga efisiensi gambar terbaik. Tidak akan menyebabkan over-drawing dan menambah overhead karena intervalnya terlalu pendek. Juga tidak akan menyebabkan animasi terhenti dan tidak mulus karena intervalnya terlalu panjang, memungkinkan berbagai efek animasi halaman web yang ingin dicapai. Terdapat mekanisme penyegaran terpadu untuk menghemat sumber daya sistem, meningkatkan kinerja sistem, dan meningkatkan efek visual.

• requestAnimationFrame akan memusatkan semua operasi DOM di setiap frame dan menyelesaikannya dalam satu gambar ulang atau perubahan posisi, dan interval waktu gambar ulang atau perubahan posisi mengikuti frekuensi penyegaran browser.
• Dalam elemen yang tersembunyi atau tidak terlihat, requestAnimationFrame tidak akan menggambar ulang atau mengubah posisi, yang tentu saja berarti lebih sedikit penggunaan CPU, GPU, dan memori.
• requestAnimationFrame adalah API yang disediakan oleh browser khusus untuk animasi. Browser akan secara otomatis mengoptimalkan pemanggilan metode selama runtime, dan jika halaman tidak aktif, animasi akan otomatis dijeda, sehingga secara efektif menghemat overhead CPU.

Metode requestAnimationFrame menggunakan panggilan balik sebagai parameter, dan fungsi panggilan balik akan diteruskan dalam parameter, DOMHighResTimeStamp, yang menunjukkan waktu ketika fungsi panggilan balik yang saat ini diurutkan berdasarkan requestAnimationFrame() dipicu. Nilai yang dikembalikan adalah ID permintaan, yang mewakili pengidentifikasi unik dalam daftar panggilan balik. Nilai ini dapat diteruskan ke window.cancelAnimationFrame() untuk membatalkan fungsi panggilan balik.

 requestID = window.requestAnimationFrame(panggilan balik);

Dengan menggunakan API ini, kode tertentu dapat dieksekusi selama rendering ulang berikutnya untuk menghindari memicu sejumlah besar reflow dalam waktu singkat.

Misalnya, fungsi panggilan balik dari acara gulir halaman (scroll) sangat cocok untuk menggunakan API ini, menunda operasi panggilan balik hingga rendering ulang berikutnya. Namun, perlu dicatat bahwa requestAnimationFrame tidak mengelola fungsi panggilan balik, yaitu memanggil requestAnimationFrame dengan fungsi panggilan balik yang sama beberapa kali sebelum panggilan balik dijalankan akan menyebabkan panggilan balik dieksekusi beberapa kali dalam bingkai yang sama. Cara termudah adalah dengan menggunakan fungsi pembatasan untuk menyelesaikan masalah ini, atau Anda dapat menemukan cara untuk hanya memiliki satu fungsi panggilan balik yang sama dalam antrian requestAnimationFrame:

 biarkan scheduleAnimationFrame = false;document.body.onscroll = () => { if (scheduledAnimationFrame) kembali; scheduleAnimationFrame = true; window.requestAnimationFrame(() => { scheduleAnimationFrame = false; // lakukan sesuatu });};

Tentu saja skenario aplikasi terbaik masih dalam animasi bingkai, yang dapat sangat mengoptimalkan kinerja.

Pertanyaan ini membahas cara merender data tanpa memblokir halaman. Artinya, Anda tidak dapat merender puluhan ribu item sekaligus, tetapi harus merender sebagian DOM sekaligus.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Dokumen</title></head><body> <ul>Kontrol</ul> <script> setTimeout(() => { // Masukkan 100.000 data const total = 100000 // Masukkan 20 data sekaligus. Jika dirasa performanya kurang bagus, kurangi const satu kali = 20 // Berapa kali waktu yang diperlukan untuk merender data? sekali let countOfRender = 0 let ul = document.querySelector(ul); function add() { // Mengoptimalkan kinerja, penyisipan tidak akan menyebabkan arus balik const fragment = document.createDocumentFragment(); sekali; i++) { const li = document.createElement(li); li.innerText = Math.floor(Math.random() * total); fragment.appendChild(li); 1; loop(); } fungsi loop() { jika (countOfRender < loopCount) { window.requestAnimationFrame(tambahkan); lingkaran(); }, 0); </skrip></tubuh></html>

Beberapa browser lama tidak mendukung API ini. Untuk menggunakan API ini, Anda dapat menyesuaikan metode ini dan memasangnya di bawah jendela:

 (fungsi() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendor[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = jendela[vendor[x]+'CancelAnimationFrame'] ||.jendela[vendor[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback) { var currTime = new Date().getTime(); 0, 16 - (waktu saat ini - waktu terakhir)); var id = window.setTimeout(fungsi() { panggilan balik(waktu saat ini + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; kembalikan id; jika (!window.cancelAnimationFrame) window.cancelAnimationFrame = fungsi(id) { clearTimeout(id);

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.