Melakukan debounce pada pengendali input Anda

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

Pengendali input berpotensi menyebabkan masalah kinerja di aplikasi Anda, mereka dapat memblokir penyelesaian {i>frame<i}, dan dapat menyebabkan tambahan dan tidak perlu tata letak.

Ringkasan

• Hindari pengendali input yang berjalan lama; mereka dapat memblokir aktivitas scroll.
• Jangan buat perubahan gaya di pengendali input.
• Lakukan debounce pada pengendali Anda; menyimpan nilai peristiwa dan menangani perubahan gaya di callback requestAnimationFrame berikutnya.

Menghindari pengendali input yang berjalan lama

Dalam kasus tercepat yang memungkinkan, saat pengguna berinteraksi dengan halaman, thread compositor halaman dapat menerima input sentuh pengguna dan cukup memindahkan konten. Hal ini tidak memerlukan pekerjaan dari thread utama, di mana JavaScript, tata letak, gaya, atau penggambaran dilakukan.

Namun, jika Anda menambahkan 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, sehingga scroll pengguna diblokir, yang dapat menyebabkan frame yang tersendat dan terlewat.

Singkatnya, Anda harus memastikan bahwa setiap pengendali input 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 apa pun.

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

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 karena Anda menjaga pengendali input tetap ringan, dan ini bagus karena sekarang Anda tidak memblokir hal-hal seperti men-scroll atau menyentuh kode yang mahal secara komputasi.