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.