觸控和滾輪事件監聽器很實用 以便追蹤使用者互動及建立自訂捲動體驗 但也可能導致頁面捲動延遲。 目前瀏覽器無法判斷事件監聽器是否會妨礙捲動, 因此他們一律會等事件監聽器執行完畢之後,再捲動頁面。 如要解決這個問題 事件監聽器永遠不會阻止捲動
瀏覽器相容性
多數瀏覽器都支援被動事件監聽器,請參閱「瀏覽器相容性」
Lighthouse 被動事件監聽器稽核方式為何失敗
Lighthouse 會標記可能會延遲網頁捲動的事件監聽器:

Lighthouse 採用以下程序 找出可能影響捲動效能的事件監聽器:
- 收集網頁上的所有事件監聽器。
- 篩除非觸控和非滑鼠滾輪的監聽器。
- 篩除呼叫
preventDefault()
的監聽器。 - 篩除來自不同主機 (非網頁) 的事件監聽器。
Lighthouse 會濾除不同主機的事件監聽器 因為您可能無法控制這些指令碼 第三方指令碼可能會影響網頁的捲動效能,但這些指令碼不會列在 Lighthouse 報表中。
如何讓事件監聽器處於被動狀態,以提升捲動效能
在 Lighthouse 識別的每個事件監聽器中新增 passive
標記。
如果您僅支援支援被動事件監聽器的瀏覽器, 再新增旗標例如:
document.addEventListener('touchstart', onTouchStart, {passive: true});
如果您要支援不支援被動事件監聽器的舊版瀏覽器,就必須使用功能偵測或 polyfill。詳情請參閱 特徵偵測 一節,進一步瞭解 WICG 被動事件監聽器一節 請參閱說明文件。