Melakukan debounce pada pengendali input Anda

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

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

Ringkasan

• Hindari penangan input yang berjalan lama karena bisa memblokir pengguliran.
• Jangan lakukan perubahan gaya di pengendali input.
• Lakukan debounce pada pengendali Anda; simpan nilai peristiwa dan tangani perubahan gaya di callback requestAnimationFrame berikutnya.

Menghindari penangan input yang berjalan lama

Dalam kemungkinan kasus tercepat, bila pengguna berinteraksi dengan laman, thread compositor laman bisa mengambil masukan sentuhan pengguna dan cuma memindahkan materi. Hal ini tidak mengharuskan thread utama melakukan pekerjaan apa pun, sedangkan JavaScript, tata letak, gaya, atau paint dilakukan.

Namun, jika Anda menyertakan 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, sehingga dapat mengakibatkan bingkai tersendat dan hilang.

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

Hindari perubahan gaya di penangan input

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

Jika Anda membuat perubahan visual di dalam salah satu pengendali tersebut, maka pada awal requestAnimationFrame, akan ada penundaan perubahan gaya. Jika Anda kemudian membaca properti visual di awal callback requestAnimationFrame, sebagaimana saran di “Hindari layout 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 membuat penangan input Anda tetap ringan, dan itu bagus karena Anda kini tidak memblokir hal-hal seperti guliran atau sentuhan pada kode yang secara komputasi mahal!