Melakukan debounce pada pengendali input Anda

Handler input berpotensi menyebabkan masalah performa di aplikasi Anda, karena dapat memblokir penyelesaian frame, dan dapat menyebabkan pekerjaan tata letak tambahan yang tidak perlu.

Handler input berpotensi menyebabkan masalah performa di aplikasi Anda, karena dapat memblokir penyelesaian frame, dan dapat menyebabkan pekerjaan tata letak tambahan yang tidak perlu.

Ringkasan

  • Hindari pengendali input yang berjalan lama; pengendali ini dapat memblokir scrolling.
  • Jangan membuat perubahan gaya di pengendali input.
  • Lakukan penghilangan guncangan pada handler Anda; simpan nilai peristiwa dan tangani perubahan gaya dalam callback requestAnimationFrame berikutnya.

Menghindari handler input yang berjalan lama

Dalam kasus tercepat, saat pengguna berinteraksi dengan halaman, thread compositor halaman dapat menerima input sentuh pengguna dan cukup memindahkan konten. Hal ini tidak memerlukan pekerjaan oleh thread utama, tempat JavaScript, tata letak, gaya, atau gambar dilakukan.

Scrolling ringan; jeda antara sentuhan pengguna dan penerapan GPU minimal hanya dengan compositor.

Namun, jika Anda melampirkan pengendali input, seperti touchstart, touchmove, atau touchend, thread compositor harus menunggu pengendali ini selesai dieksekusi karena Anda dapat memilih untuk memanggil preventDefault() dan menghentikan scroll sentuh. Meskipun Anda tidak memanggil preventDefault(), compositor harus menunggu, dan dengan demikian scroll pengguna diblokir, yang dapat menyebabkan ketersendatan dan frame terlewat.

Scrolling berat; setelah sentuhan pengguna, scrolling diblokir dan penerapan GPU tertunda oleh handler 'onTouchMove'.

Singkatnya, Anda harus memastikan bahwa setiap pengendali input yang Anda jalankan harus dieksekusi dengan cepat dan memungkinkan compositor melakukan tugasnya.

Hindari perubahan gaya di pengendali input

Handler input, seperti handler untuk scroll dan sentuh, dijadwalkan untuk dijalankan tepat sebelum callback requestAnimationFrame.

Jika Anda membuat perubahan visual di dalam salah satu pengendali tersebut, maka pada awal requestAnimationFrame, akan ada perubahan gaya yang tertunda. Jika Anda kemudian membaca properti visual di awal callback requestAnimationFrame, seperti yang disarankan dalam “Hindari tata letak besar dan kompleks serta perebutan tata letak”, Anda akan memicu tata letak sinkron paksa.

Scrolling berat; gaya penjadwalan dibaca setelah requestAnimationFrame menghasilkan tata letak sinkron paksa.

Menghilangkan pentalan pengendali scroll

Solusi untuk kedua masalah di atas sama: Anda harus selalu melakukan penghilangan getaran pada perubahan visual ke callback requestAnimationFrame berikutnya:

function onScroll (evt) {

    // Store the scroll value for laterz.
    lastScrollY = window.scrollY;

    // Prevent multiple rAF callbacks.
    if (scheduledAnimationFrame)
    return;

    scheduledAnimationFrame = true;
    requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);

Tindakan ini juga memiliki manfaat tambahan untuk menjaga agar pengendali input Anda tetap ringan, yang sangat bagus karena sekarang Anda tidak memblokir hal-hal seperti men-scroll atau menyentuh kode yang mahal secara komputasi.