在努力提高渐进式 Web 应用程序的性能时,我遇到了一个新功能Passive Event Listeners
,我发现很难理解这个概念。
Passive Event Listeners
在我们的项目中是什么以及需要什么?
在努力提高渐进式 Web 应用程序的性能时,我遇到了一个新功能Passive Event Listeners
,我发现很难理解这个概念。
Passive Event Listeners
在我们的项目中是什么以及需要什么?
被动事件侦听器是一项新兴的 Web 标准,是 Chrome 51 中提供的新功能,可为滚动性能提供重大的潜在提升。Chrome 发行说明。
它使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器来选择加入以获得更好的滚动性能。
问题:所有现代浏览器都有一个线程滚动功能,即使在运行昂贵的 JavaScript 时也允许滚动平滑运行,但是这种优化部分被等待 anytouchstart
和touchmove
处理程序的结果的需要打败了,这可能会通过调用完全阻止滚动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);