在努力提高渐进式网络应用程序的性能时,我遇到了一个新功能Passive Event Listeners
,我发现很难理解这个概念。
什么是Passive Event Listeners
,我们的项目需要什么?
被动事件监听器是一种新兴的Web标准,Chrome 51中提供的新功能为滚动性能提供了重要的潜在推动力。 Chrome Release Notes.
它使开发人员能够通过消除滚动阻止触摸和滚轮事件监听器的需要来选择更好地滚动性能。
问题:所有现代浏览器都具有线程滚动功能,即使在运行昂贵的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);