Melakukan debounce pada pengendali input Anda

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

Pengendali 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 karena dapat memblokir scroll.
  • Jangan buat perubahan gaya di pengendali input.
  • Lakukan debounce pada pengendali Anda; simpan nilai peristiwa dan tangani perubahan gaya di callback requestAnimationFrame berikutnya.

Menghindari pengendali input yang berjalan lama

Dalam kasus tercepat yang mungkin, saat pengguna berinteraksi dengan halaman, thread compositor halaman bisa mengambil input sentuh pengguna dan cukup memindahkan konten. Hal ini tidak memerlukan pekerjaan thread utama, dan JavaScript, layout, gaya, atau paint dilakukan.

Scroll ringan; hanya 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 terjadinya scroll sentuh. Meskipun Anda tidak memanggil preventDefault(), compositor harus menunggu, dan karena itu scroll pengguna diblokir, yang dapat mengakibatkan frame yang tersendat dan terlewat.

Scroll berat; compositor diblokir di JavaScript.

Singkatnya, Anda harus memastikan pengendali input apa pun yang Anda jalankan harus mengeksekusi dengan cepat dan memungkinkan compositor melakukan tugasnya.

Menghindari perubahan gaya di pengendali input

Pengendali input, seperti yang digunakan untuk scroll dan sentuh, dijadwalkan untuk berjalan tepat sebelum callback requestAnimationFrame.

Jika Anda membuat perubahan visual di dalam salah satu pengendali tersebut, maka di 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 dan tata letak yang besar dan kompleks serta layout thrashing”, Anda akan memicu tata letak sinkron paksa.

Scroll berat; compositor diblokir di JavaScript.

Melakukan debounce pada pengendali scroll Anda

Solusi untuk kedua masalah di atas adalah sama: Anda harus selalu men-debounce 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);

Melakukan hal ini juga memiliki manfaat tambahan yaitu membuat pengendali input Anda tetap ringan, yang luar biasa karena sekarang Anda tidak memblokir hal-hal seperti men-scroll atau menyentuh kode yang mahal secara komputasi!