使用被動事件監聽器改善捲動效能

觸控和滾輪事件監聽器有助於追蹤使用者互動及建立自訂捲動體驗，但也會延遲網頁捲動。目前瀏覽器無法判斷事件監聽器是否會防止捲動，因此一律會等待監聽器執行完畢，再捲動網頁。被動事件監聽器可讓您指出事件監聽器絕不會阻止捲動，藉此解決這個問題。

瀏覽器相容性

大多數瀏覽器都支援被動事件監聽器。請參閱「瀏覽器相容性」一節。

Lighthouse 被動事件監聽器稽核失敗的原因

Lighthouse 會標記可能延遲網頁捲動的事件監聽器：

Lighthouse 會透過下列程序，找出可能影響捲動效能的事件監聽器：

1. 收集網頁上的所有事件監聽器。
2. 篩除非觸控和非滾輪的接聽器。
3. 篩除撥打 preventDefault() 的聽眾。
4. 篩除來自不同主機的接聽器。

Lighthouse 會篩除來自不同主機的監聽器，因為您可能無法控管這些指令碼。可能有些第三方指令碼會影響網頁的捲動效能，但這些指令碼不會列在 Lighthouse 報表中。

如何將事件監聽器設為被動，以提升捲動效能

針對 Lighthouse 識別出的每個事件監聽器，新增 passive 旗標。

如果您只支援具備被動事件監聽器支援功能的瀏覽器，只要新增旗標即可。例如：

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

如果您支援不支援被動事件監聽器的舊版瀏覽器，則需要使用功能偵測或 Polyfill。詳情請參閱 WICG 被動事件監聽器說明文件中的「功能偵測」一節。

資源

• 「未使用被動事件監聽器來提升捲動效能」稽核的原始碼
• 使用被動事件監聽器提升捲動效能
• 被動事件監聽器說明
• EventTarget.addEventListener()