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 performa di aplikasi Anda, karena dapat memblokir penyelesaian frame, dan dapat menyebabkan pekerjaan tata letak tambahan yang tidak perlu.

Ringkasan

• Hindari penangan input yang berjalan lama karena bisa memblokir pengguliran.
• 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 memungkinkan, saat pengguna berinteraksi dengan halaman, thread compositor halaman dapat mengambil input sentuh pengguna dan cukup memindahkan konten. Hal ini tidak mengharuskan thread utama melakukan pekerjaan apa pun, sedangkan JavaScript, tata letak, gaya, atau paint 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.

Hindari 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 penundaan perubahan gaya. 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.