javascript - 什么是被动事件监听器？

Question

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

什么是Passive Event Listeners，我们的项目中有什么需要？

Answer 1

Passive event listeners are an emerging web standard, new featureshipped in Chrome 51 that provide a major potential boost to scrollperformance. Chrome Release Notes.

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

问题:所有现代浏览器都具有线程滚动功能，即使在运行昂贵的 JavaScript 时也允许滚动平稳运行，但由于需要等待任何 <touchstart 和 touchmove 处理程序，它们可以通过在事件上调用 preventDefault() 来完全阻止滚动。

解决方案:{passive: true}

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

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 , Demo Video , Explainer Doc