什么是被动事件侦听器?

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

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


答案 1

被动事件侦听器是一种新兴的 Web 标准,Chrome 51 中提供的新功能可显著提升滚动性能。Chrome 发行说明。

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

问题:所有现代浏览器都有一个线程滚动功能,即使在昂贵的JavaScript运行时,也允许滚动平稳运行,但是这种优化被需要等待任何和处理程序的结果而部分失败,这可能会通过调用事件来完全阻止滚动。touchstarttouchmovepreventDefault()

解决方案:{被动:真}

通过将触摸或轮子侦听器标记为被动,开发人员承诺处理程序不会调用以禁用滚动。这释放了浏览器,使其无需等待JavaScript即可立即响应滚动,从而确保为用户提供可靠流畅的滚动体验。preventDefault

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 规范演示视频解释器文档


答案 2

这个错误总是出现在 React / Preact 项目中。它似乎根本没有影响任何东西。通过在 devTools 日志级别中取消选择“详细”将其关闭