Работая над повышением производительности прогрессивных веб-приложений, я наткнулся на новую функцию, Passive Event Listeners
и мне трудно понять эту концепцию.
Что Passive Event Listeners
и зачем нужно иметь в наших проектах?
Работая над повышением производительности прогрессивных веб-приложений, я наткнулся на новую функцию, Passive Event Listeners
и мне трудно понять эту концепцию.
Что Passive Event Listeners
и зачем нужно иметь в наших проектах?
Ответы:
Пассивные прослушиватели событий - это новый веб-стандарт, новая функция, поставляемая в 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);