使用被动监听器提高滚动性能

触控和滚轮事件监听器可用于跟踪用户互动和创建自定义滚动体验,但它们也可能会延迟网页滚动。目前,浏览器无法知道事件监听器是否会阻止滚动,因此它们总是等待监听器完成执行,然后才滚动网页。被动事件监听器通过允许您指明事件监听器永远不会阻止滚动来解决此问题。

浏览器兼容性

大多数浏览器都支持被动事件监听器。请参阅浏览器兼容性

Lighthouse 被动事件监听器审核失败的原因

Lighthouse 会标记可能会延迟网页滚动的事件监听器:

Lighthouse 审核显示,页面未使用被动式事件监听器来提高滚动性能

Lighthouse 使用以下流程来识别可能会影响滚动性能的事件监听器:

  1. 收集网页上的所有事件监听器。
  2. 过滤掉非触摸和非滚轮监听器。
  3. 过滤掉拨打 preventDefault() 的听众。
  4. 过滤掉来自与网页不同主机的监听器。

Lighthouse 会过滤掉来自不同主机的监听器,因为您可能无法控制这些脚本。可能存在会损害网页滚动性能的第三方脚本,但这些脚本不会列在 Lighthouse 报告中。

如何使事件监听器处于被动状态以提高滚动性能

为 Lighthouse 识别出的每个事件监听器添加 passive 标志。

如果您仅支持具有被动事件监听器支持的浏览器,只需添加该标志即可。例如:

document.addEventListener('touchstart', onTouchStart, {passive: true});

如果您要支持不支持被动事件监听器的旧版浏览器,则需要使用功能检测或 Polyfill。如需了解详情,请参阅 WICG 被动事件监听器说明文档的功能检测部分。

资源