Pemroses peristiwa sentuh dan roda berguna untuk melacak interaksi pengguna dan membuat pengalaman scroll kustom, tetapi juga dapat menunda scroll halaman. Saat ini, browser tidak dapat mengetahui apakah pemroses peristiwa akan mencegah scroll, sehingga browser selalu menunggu pemroses selesai dieksekusi sebelum men-scroll halaman. Pemroses peristiwa pasif mengatasi masalah ini dengan memungkinkan Anda menunjukkan bahwa pemroses peristiwa tidak akan pernah mencegah scroll.
Kompatibilitas browser
Sebagian besar browser mendukung pemroses peristiwa pasif. Lihat Kompatibilitas browser
Cara audit pemroses peristiwa pasif Lighthouse gagal
Lighthouse menandai pemroses peristiwa yang dapat menunda scroll halaman:
Lighthouse menggunakan proses berikut untuk mengidentifikasi pemroses peristiwa yang dapat memengaruhi performa scroll:
- Mengumpulkan semua pemroses peristiwa di halaman.
- Memfilter pemroses non-sentuh dan non-roda.
- Memfilter pemroses yang memanggil
preventDefault()
. - Memfilter pemroses yang berasal dari host yang berbeda dengan halaman.
Lighthouse memfilter pemroses dari host yang berbeda karena Anda mungkin tidak memiliki kontrol atas skrip ini. Mungkin ada skrip pihak ketiga yang membahayakan performa scroll halaman, tetapi skrip tersebut tidak tercantum dalam laporan Lighthouse Anda.
Cara membuat pemroses peristiwa menjadi pasif untuk meningkatkan performa scroll
Tambahkan flag passive
ke setiap pemroses peristiwa yang diidentifikasi Lighthouse.
Jika Anda hanya mendukung browser yang memiliki dukungan pemroses peristiwa pasif, cukup tambahkan flag. Contoh:
document.addEventListener('touchstart', onTouchStart, {passive: true});
Jika Anda mendukung browser lama yang tidak mendukung pemroses peristiwa pasif, Anda harus menggunakan deteksi fitur atau polyfill. Lihat bagian Deteksi Fitur dalam dokumen penjelasan Pemroses peristiwa pasif WICG untuk mengetahui informasi selengkapnya.