什么是被动事件侦听器?

IT技术 javascript dom-events event-listener passive-event-listeners
2021-01-29 12:05:00

在努力提高渐进式 Web 应用程序的性能时,我遇到了一个新功能Passive Event Listeners,我发现很难理解这个概念。

Passive Event Listeners在我们的项目中是什么以及需要什么?

1个回答

被动事件侦听器是一项新兴的 Web 标准,是 Chrome 51 中提供的新功能,可为滚动性能提供重大的潜在提升。Chrome 发行说明。

它使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器来选择加入以获得更好的滚动性能。

问题:所有现代浏览器都有一个线程滚动功能,即使在运行昂贵的 JavaScript 时也允许滚动平滑运行,但是这种优化部分被等待 anytouchstarttouchmove处理程序的结果的需要打败了,这可能会通过调用完全阻止滚动preventDefault()在活动上。

解决方案: {passive: true}

通过将触摸或滚轮侦听器标记为被动,开发人员Promise处理程序不会调用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 规范演示视频说明文档

所以我们应该总是添加这行代码(至少在大多数情况下),对吗?
2021-03-20 12:05:00
@yardpenalty.com 我们可以使用以下 polyfill 并避免浏览器检查。对于滚动用例,使用被动事件侦听器是一个很大的优势。github.com/WICG/EventListenerOptions/blob/gh-pages/...
2021-03-20 12:05:00
@Vikrant Siwach 很好的建议。当您在 polyfill.js 中管理所有这些时,Polyfill 会快速且无痛
2021-03-28 12:05:00
这会导致您在 Mozilla 中的 js 引擎崩溃。在附加此事件侦听器之前,您最好先检测浏览器
2021-04-06 12:05:00
@AltianoGerung 当浏览器推荐它时。您将在控制台的信息或警告选项卡中看到该消息。
2021-04-12 12:05:00