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

181

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

Что Passive Event Listenersи зачем нужно иметь в наших проектах?

Вивек Пратап Сингх
источник

Ответы:

213

Пассивные прослушиватели событий - это новый веб-стандарт, новая функция, поставляемая в 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 , демо-видео , документ объяснения

Вивек Пратап Сингх
источник
1
поэтому мы всегда должны добавлять эти строки кода (по крайней мере, для большинства случаев), верно?
Альтиано Герунг,
Это сбивает ваш движок в Mozilla. Лучше определить браузер, прежде чем
подключать
@AltianoGerung Когда браузер рекомендует это. Вы увидите сообщение на вкладке «Информация» или «Предупреждение» консоли.
snowYetis
@ yardpenalty.com Мы можем использовать следующее заполнение и избегать проверок браузером. Для прокрутки сценариев использования пассивные прослушиватели событий являются большим плюсом. github.com/WICG/EventListenerOptions/blob/gh-pages/…
Викрант Сивах
@ Викрант Сивах отличный совет. Polyfill работает быстро и несколько безболезненно, если управлять всеми из них, скажем, polyfill.js
yardpenalty.com