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

触摸和滚轮事件监听器非常有用 来跟踪用户互动情况并创建自定义滚动体验, 但也会延迟页面滚动。 目前,浏览器无法确定事件监听器是否会阻止滚动, 因此它们始终会等待监听器执行完毕后再滚动页面。 被动事件监听器可为您解决这一问题,具体方法是让您 事件监听器绝不会阻止滚动。

浏览器兼容性

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

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

灯塔 标记可能会延迟页面滚动的事件监听器:

Lighthouse 审核显示页面不使用被动事件监听器来提升滚动性能

Lighthouse 使用以下过程 找出可能会影响滚动性能的事件监听器:

  1. 收集页面上的所有事件监听器。
  2. 过滤非触摸和非滚轮侦听器。
  3. 滤除调用 preventDefault() 的监听器。
  4. 过滤与页面不在同一个主机上的侦听器。

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

如何将事件监听器设为被动以提高滚动性能

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

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

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

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

资源