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

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

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

Источник

2 ответа

Решение

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

addEventListener(document, "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, демо-видео, документ объяснения

Источник

Эта ошибка постоянно возникает в проектах React/Preact. Вроде вообще ни на что не влияет. Отключите его, сняв флажок «подробный» на уровнях журнала devTools.

Источник
Другие вопросы по тегам