Что такое прослушиватели пассивных событий?

Во время работы над повышением производительности для прогрессивных веб-приложений я столкнулся с новой функцией Passive Event Listeners, и мне сложно понять эту концепцию.

Что такое Passive Event Listeners и в чем состоит необходимость его использования в наших проектах?

Ответ 1

Слушатели пассивных событий - это новый веб-стандарт, новая функция поставляется в Chrome 51, что обеспечивает большой потенциал для прокрутки представление. Примечания к выпуску Chrome.

Это позволяет разработчикам включить повышение производительности прокрутки, устраняя необходимость в прокрутке для блокировки прослушивателей событий касания и прокрутки.

Проблема: Все современные браузеры имеют функцию многопоточной прокрутки, позволяющую плавно выполнять прокрутку, даже когда выполняется дорогой JavaScript, но эта оптимизация частично побеждена необходимостью ждать результатов любых обработчиков touchstart и touchmove, что может полностью предотвратить прокрутку, вызвав preventDefault() для события.

Решение: {passive: true}

Отмечая слушателя касания или колеса как пассивного, разработчик обещает, что обработчик не будет вызывать preventDefault, чтобы отключить прокрутку. 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 , Демонстрационное видео , Документ объяснения