Menggunakan pemroses pasif untuk meningkatkan performa scroll

Pemroses peristiwa sentuh dan roda berguna untuk melacak interaksi pengguna dan membuat pengalaman men-scroll kustom, tetapi juga dapat menunda pen-scroll-an halaman. Saat ini, browser tidak dapat mengetahui apakah pemroses peristiwa akan mencegah scrolling, sehingga browser selalu menunggu pemroses selesai dieksekusi sebelum men-scroll halaman. Pemroses peristiwa pasif memecahkan masalah ini dengan memungkinkan Anda menunjukkan bahwa pemroses peristiwa tidak akan pernah mencegah scrolling.

Kompatibilitas browser

Sebagian besar browser mendukung pemroses peristiwa pasif. Lihat Kompatibilitas browser

Penyebab kegagalan audit pemroses peristiwa pasif Lighthouse

Lighthouse menandai pemroses peristiwa yang dapat menunda scrolling halaman:

Audit Lighthouse menunjukkan bahwa halaman tidak menggunakan pemroses peristiwa pasif untuk meningkatkan performa scroll

Lighthouse menggunakan proses berikut untuk mengidentifikasi pemroses peristiwa yang dapat memengaruhi performa scrolling:

  1. Kumpulkan semua pemroses peristiwa di halaman.
  2. Memfilter pemroses non-sentuh dan non-roda.
  3. Memfilter pendengar yang memanggil preventDefault().
  4. Memfilter keluar pendengar 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 merusak performa scrolling halaman Anda, tetapi skrip ini tidak tercantum dalam laporan Lighthouse Anda.

Cara membuat pemroses peristiwa pasif untuk meningkatkan performa scroll

Tambahkan tanda passive ke setiap pemroses peristiwa yang diidentifikasi Lighthouse.

Jika Anda hanya mendukung browser yang memiliki dukungan pemroses peristiwa pasif, cukup tambahkan tanda. 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.

Resource