Untuk meningkatkan performa scroll/zoom wheel, developer dianjurkan untuk
mendaftarkan pemroses peristiwa wheel dan mousewheel sebagai pasif
dengan meneruskan opsi {passive: true} ke addEventListener(). Mendaftarkan pemroses peristiwa sebagai pasif memberi tahu browser bahwa pemroses roda tidak akan memanggil preventDefault() dan browser dapat melakukan scroll dan zoom dengan aman tanpa memblokir pemroses.
Masalahnya adalah bahwa sering kali pemroses peristiwa roda secara konsep
pasif (tidak memanggil preventDefault()) tetapi tidak ditentukan secara eksplisit sebagai
tersebut, sehingga browser harus menunggu penanganan peristiwa JS selesai sebelum
mulai men-scroll/memperbesar meskipun menunggu tidak diperlukan. Di Chrome 56,
kami memperbaiki masalah ini untuk touchstart dan touchmove,
dan perubahan tersebut kemudian diadopsi oleh Safari dan Firefox. Seperti yang dapat Anda lihat
dari video demonstrasi yang kami buat pada saat itu, membiarkan perilaku seperti itu
akan menghasilkan penundaan yang signifikan dalam respons scroll. Sekarang di Chrome 73, kami telah menerapkan intervensi yang sama ke peristiwa wheel dan mousewheel.
Intervensi
Sasaran kami dengan perubahan ini adalah untuk mengurangi waktu yang diperlukan untuk memperbarui tampilan
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 di target root (jendela, dokumen, atau isi) menjadi pasif secara default. Artinya, 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
Dalam sebagian besar kasus, tidak akan ada kerusakan. Hanya dalam kasus yang jarang terjadi
(kurang dari 0,3% halaman menurut metrik kami), scroll/zoom yang tidak disengaja
mungkin terjadi karena panggilan preventDefault() diabaikan di dalam
pemroses yang diperlakukan sebagai pasif secara default. Aplikasi Anda dapat
menentukan apakah aplikasi mungkin mengalami hal ini di dunia nyata dengan memeriksa apakah pemanggilan
preventDefault() memiliki efek apa pun 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.