Cosa sono i listener di eventi passivi?

Mentre lavoravo per migliorare le prestazioni delle app web progressive, mi sono imbattuto in una nuova funzionalità Passive Event Listenerse trovo difficile capire il concetto.

Cosa sono Passive Event Listenerse qual è la necessità di averlo nei nostri progetti?

I listener di eventi passivi sono uno standard web emergente, una nuova funzionalità fornita in Chrome 51 che fornisce un potenziale potenziamento alle prestazioni di scorrimento. Note di rilascio di Chrome.

Consente agli sviluppatori di opt-in per migliorare le prestazioni di scorrimento eliminando la necessità di scorrere per bloccare i listener di eventi touch e wheel.

Problema: tutti i browser moderni hanno una funzionalità di scorrimento con thread per consentire lo scorrimento senza intoppi anche quando è in esecuzione JavaScript costoso, ma questa ottimizzazione è parzialmente sconfitta dalla necessità di attendere i risultati di qualsiasi touchstarte dei touchmovegestori, che possono impedire lo scorrimento chiamando preventDefault()sull'evento.

Soluzione: {passive: true}

Contrassegnando un tocco o un listener delle ruote come passivo, lo sviluppatore promette che il gestore non chiamerà preventDefaultper disabilitare lo scorrimento. 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