觸控和滑鼠滾輪事件監聽器可用於追蹤使用者互動情形,並建立自訂捲動體驗,但也可能會延遲頁面捲動。目前,瀏覽器無法得知事件監聽器是否會阻止捲動,因此會在等待監聽器執行完畢後,再捲動頁面。被動事件監聽器可解決這個問題,讓您指出事件監聽器絕不會阻止捲動。
瀏覽器相容性
大多數瀏覽器都支援被動事件監聽器。請參閱「瀏覽器相容性」
Lighthouse 被動事件監聽器稽核失敗的原因
Lighthouse 會標記可能會延遲網頁捲動的事件監聽器:
Lighthouse 會透過以下程序,找出可能影響捲動效能的事件監聽器:
- 收集網頁上的所有事件監聽器。
- 篩除非觸控和非滑鼠滾輪的監聽器。
- 篩除呼叫
preventDefault()
的監聽器。 - 篩除來自不同主機的事件監聽器。
Lighthouse 會篩除不同主機的事件監聽器,因為您可能無法控管這些指令碼。可能有第三方指令碼會影響網頁的捲動效能,但這些指令碼不會列在 Lighthouse 報表中。
如何讓事件監聽器處於被動狀態,以提升捲動效能
在 Lighthouse 識別的每個事件監聽器中新增 passive
標記。
如果您只支援支援被動事件監聽器的瀏覽器,請直接新增標記。例如:
document.addEventListener('touchstart', onTouchStart, {passive: true});
如果您要支援不支援被動事件監聽器的舊版瀏覽器,就必須使用功能偵測或 polyfill。如需瞭解詳情,請參閱 WICG 被動事件監聽器說明文件的「功能偵測」一節。