Apa itu pendengar acara pasif?

Saat bekerja untuk meningkatkan kinerja untuk aplikasi web progresif, saya menemukan fitur baru Passive Event Listenersdan saya merasa sulit untuk memahami konsepnya.

Apa Passive Event Listenersdan apa kebutuhan untuk memilikinya dalam proyek kami?

Pendengar acara pasif adalah standar web yang muncul, fitur baru yang dikirimkan di Chrome 51 yang memberikan dorongan potensial besar untuk menggulir kinerja. Catatan Rilis Chrome.

Ini memungkinkan pengembang untuk ikut serta dalam kinerja gulir yang lebih baik dengan menghilangkan kebutuhan gulir untuk memblokir pendengar acara sentuh dan roda.

Masalah: Semua peramban modern memiliki fitur pengguliran ulir untuk memungkinkan pengguliran berjalan dengan lancar bahkan saat JavaScript yang mahal sedang berjalan, tetapi pengoptimalan ini sebagian dikalahkan oleh kebutuhan untuk menunggu hasil dari siapa pun touchstartdan touchmovepenangan, yang dapat mencegah gulir seluruhnya dengan menelepon preventDefault()di acara tersebut.

Larutan: {passive: true}

Dengan menandai pendengar sentuh atau roda sebagai pasif, pengembang menjanjikan pawang tidak akan menelepon preventDefaultuntuk menonaktifkan pengguliran. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

document.addEventListener("touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOM Spec , Demo Video , Explainer Doc