Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

网站使用被动事件侦听器以提升滚动性能

为什么说此审查非常重要

在您的触摸和滚轮事件侦听器上设置 passive 选项可提升滚动性能。

有关概述,请参阅通过被动事件侦听器提升滚动性能

有关技术详细信息,请参阅被动事件侦听器规范中的说明

如何通过此审查

passive 标志添加到 Lighthouse 已识别的所有事件侦听器。 一般情况下,将 passive 标志添加到每个没有调用 preventDefault()wheelmousewheeltouchstarttouchmove 事件侦听器。

在支持被动事件侦听器的浏览器中,将侦听器标记为 passive 与设置标志一样简单:

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

不过,在不支持被动事件侦听器的浏览器中,第三个参数是一个布尔值,以表明此事件是应触发还是采集。因此,使用上面的语法可能会导致意外后果。

如需了解如何安全地实现被动事件侦听器,请参阅功能检测中的 polyfill。

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 使用以下算法标记潜在的被动事件侦听器候选项:

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

Lighthouse 过滤来自不同主机的侦听器,因为您可能无法控制这些脚本。 因此,请注意,Lighthouse 的审查并不代表您的页面的完整滚动性能。 可能存在损害页面的滚动性能的第三方脚本,但这些不会在您的 Lighthouse 报告中列出。