觸控和滾輪事件監聽器有助於追蹤使用者互動及建立自訂捲動體驗,但也會延遲網頁捲動。目前瀏覽器無法判斷事件監聽器是否會防止捲動,因此一律會等待監聽器執行完畢,再捲動網頁。被動事件監聽器可讓您指出事件監聽器絕不會阻止捲動,藉此解決這個問題。
瀏覽器相容性
大多數瀏覽器都支援被動事件監聽器。請參閱「瀏覽器相容性」一節。
Lighthouse 被動事件監聽器稽核失敗的原因
Lighthouse 會標記可能延遲網頁捲動的事件監聽器:

Lighthouse 會透過下列程序,找出可能影響捲動效能的事件監聽器:
- 收集網頁上的所有事件監聽器。
- 篩除非觸控和非滾輪的接聽器。
- 篩除撥打
preventDefault()
的聽眾。 - 篩除來自不同主機的接聽器。
Lighthouse 會篩除來自不同主機的監聽器,因為您可能無法控管這些指令碼。可能有些第三方指令碼會影響網頁的捲動效能,但這些指令碼不會列在 Lighthouse 報表中。
如何將事件監聽器設為被動,以提升捲動效能
針對 Lighthouse 識別出的每個事件監聽器,新增 passive
旗標。
如果您只支援具備被動事件監聽器支援功能的瀏覽器,只要新增旗標即可。例如:
document.addEventListener('touchstart', onTouchStart, {passive: true});
如果您支援不支援被動事件監聽器的舊版瀏覽器,則需要使用功能偵測或 Polyfill。詳情請參閱 WICG 被動事件監聽器說明文件中的「功能偵測」一節。