Mengoptimalkan eksekusi JavaScript

JavaScript sering memicu perubahan visual. Terkadang hal ini dilakukan secara langsung melalui manipulasi gaya, dan terkadang melalui penghitungan yang menghasilkan perubahan visual, seperti menelusuri atau mengurutkan data. JavaScript yang berjalan lama atau tidak tepat waktu adalah penyebab umum masalah performa. Anda harus berusaha meminimalkan dampaknya jika memungkinkan.

JavaScript sering memicu perubahan visual. Terkadang hal itu dilakukan secara langsung melalui manipulasi gaya, dan terkadang melalui penghitungan yang menghasilkan perubahan visual, seperti menelusuri atau mengurutkan data. JavaScript yang berjalan lama atau tidak tepat waktu adalah penyebab umum masalah performa. Anda harus berusaha meminimalkan dampaknya jika memungkinkan.

Membuat profil performa JavaScript bisa menjadi sesuatu yang rumit, karena JavaScript yang Anda tulis tidak seperti kode yang benar-benar dieksekusi. Browser modern menggunakan compiler JIT dan berbagai pengoptimalan dan trik untuk mencoba memberikan eksekusi tercepat kepada Anda, dan hal ini secara substansial mengubah dinamika kode.

Namun, dengan semua hal yang telah disebutkan, ada beberapa hal yang dapat Anda lakukan untuk membantu aplikasi menjalankan JavaScript dengan baik.

Ringkasan

• Hindari setTimeout atau setInterval untuk pembaruan visual; selalu gunakan requestAnimationFrame.
• Pindahkan JavaScript yang berjalan lama dari thread utama ke Web Worker.
• Gunakan tugas mikro untuk membuat perubahan DOM di beberapa frame.
• Gunakan Linimasa dan JavaScript Profiler Chrome DevTools untuk menilai dampak JavaScript.

Menggunakan requestAnimationFrame untuk perubahan visual

Saat perubahan visual terjadi di layar, Anda ingin melakukan pekerjaan pada waktu yang tepat untuk browser, yaitu tepat di awal frame. Satu-satunya cara untuk menjamin bahwa JavaScript Anda akan berjalan di awal frame adalah dengan menggunakan requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Framework atau contoh dapat menggunakan setTimeout atau setInterval untuk melakukan perubahan visual seperti animasi, tetapi masalahnya adalah callback akan berjalan pada titik tertentu dalam frame, mungkin tepat di akhir, dan hal itu sering kali dapat menyebabkan kita melewatkan frame, sehingga menyebabkan jank.