Menggunakan pemroses pasif untuk meningkatkan performa scroll

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:

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 scroll:

  1. Mengumpulkan semua pemroses peristiwa di halaman.
  2. Memfilter pemroses non-sentuh dan non-roda.
  3. Memfilter pemroses yang memanggil preventDefault().
  4. 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.

Resource