Membuat roda scroll cepat secara default

Sahel Sharify
Sahel Sharify

Untuk meningkatkan performa scroll/perbesar/perkecil wheel, developer disarankan untuk mendaftarkan pemroses peristiwa wheel dan mousewheel sebagai pasif dengan meneruskan opsi {passive: true} ke addEventListener(). Mendaftarkan pemroses peristiwa sebagai pasif akan memberi tahu browser bahwa pemroses roda tidak akan memanggil preventDefault() dan browser dapat melakukan scroll dan zoom dengan aman tanpa memblokir pemroses.

Masalahnya adalah, paling sering pemroses peristiwa roda bersifat pasif secara konseptual (jangan panggil preventDefault()), tetapi tidak ditentukan secara eksplisit seperti itu, sehingga browser harus menunggu penanganan peristiwa JS selesai sebelum mulai men-scroll/melakukan zoom meskipun menunggu tidak diperlukan. Di Chrome 56, kami memperbaiki masalah ini untuk touchstart dan touchmove, dan perubahan tersebut kemudian diterapkan oleh Safari dan Firefox. Seperti yang Anda lihat dari video demonstrasi yang kami buat saat itu, tetap mempertahankan perilaku tersebut karena menghasilkan penundaan yang cukup lama dalam respons scroll. Sekarang di Chrome 73, kami telah menerapkan intervensi yang sama pada peristiwa wheel dan mousewheel.

Intervensi

Tujuan kami dengan perubahan ini adalah mengurangi waktu yang diperlukan untuk memperbarui layar setelah pengguna mulai men-scroll dengan roda atau touchpad tanpa perlu developer mengubah kode. Metrik kami menunjukkan bahwa 75% pemroses peristiwa wheel dan mousewheel yang terdaftar di target root (jendela, dokumen, atau isi) tidak menentukan nilai apa pun untuk opsi pasif dan lebih dari 98% pemroses tersebut tidak memanggil preventDefault(). Di Chrome 73, kami mengubah pemroses wheel dan mousewheel yang terdaftar pada target root (jendela, dokumen, atau isi) menjadi pasif secara default. Ini berarti pemroses peristiwa seperti:

window.addEventListener("wheel", func);

menjadi setara dengan:

window.addEventListener("wheel", func, {passive: true});

Dan memanggil preventDefault() di dalam pemroses akan diabaikan dengan peringatan DevTools berikut:

[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

Kerusakan dan Panduan

Umumnya, tidak akan ada kerusakan. Dalam kasus yang jarang terjadi (kurang dari 0,3% halaman sesuai dengan metrik kami), scroll/perbesar/perkecil yang tidak diinginkan dapat terjadi karena panggilan preventDefault() diabaikan di dalam pemroses yang diperlakukan sebagai pasif secara default. Aplikasi Anda dapat menentukan apakah hal ini terjadi di luar dugaan dengan memeriksa apakah pemanggilan preventDefault() berpengaruh melalui properti defaultPrevented. Perbaikan untuk kasus yang terpengaruh relatif mudah: teruskan {passive: false} ke addEventListener() untuk mengganti perilaku default dan mempertahankan pemroses peristiwa sebagai pemblokiran.