触摸和滚轮事件监听器对于跟踪用户互动和创建自定义滚动体验非常有用,但它们也可能会延迟网页滚动。目前,浏览器无法知道事件监听器是否会阻止滚动,因此它们总是等待监听器执行完毕后再滚动页面。被动事件监听器可让您指明事件监听器绝不会阻止滚动,从而解决此问题。
浏览器兼容性
大多数浏览器都支持被动事件监听器。请参阅浏览器兼容性
Lighthouse 被动事件监听器审核失败的原因
Lighthouse 会标记可能会延迟页面滚动的事件监听器:
Lighthouse 使用以下流程来识别可能会影响滚动性能的事件监听器:
- 收集页面上的所有事件监听器。
- 过滤非触摸和非滚轮侦听器。
- 滤除调用
preventDefault()
的监听器。 - 过滤与页面不在同一个主机上的侦听器。
Lighthouse 会过滤来自不同主机的监听器,因为您可能无法控制这些脚本。可能存在损害页面的滚动性能的第三方脚本,但这些不会在您的 Lighthouse 报告中列出。
如何将事件监听器设为被动以提高滚动性能
为 Lighthouse 识别的每个事件监听器添加 passive
标志。
如果您仅支持支持被动事件监听器的浏览器,只需添加标志即可。例如:
document.addEventListener('touchstart', onTouchStart, {passive: true});
如果您要支持不支持被动事件监听器的旧版浏览器,则需要使用功能检测或 polyfill。如需了解详情,请参阅 WICG 被动事件监听器说明文档的功能检测部分。