Chrome Dev Summit 2018 is happening now and streaming live 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 報告中列出。