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

觸控和滑鼠滾輪事件監聽器可用於追蹤使用者互動情形,並建立自訂捲動體驗,但也可能會延遲頁面捲動。目前,瀏覽器無法得知事件監聽器是否會阻止捲動,因此會在等待監聽器執行完畢後,再捲動頁面。被動事件監聽器可解決這個問題,讓您指出事件監聽器絕不會阻止捲動。

瀏覽器相容性

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

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

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

Lighthouse 稽核顯示網頁未使用被動事件監聽器來提升捲動效能

Lighthouse 會透過以下程序,找出可能影響捲動效能的事件監聽器:

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

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

如何讓事件監聽器處於被動狀態,以提升捲動效能

在 Lighthouse 識別的每個事件監聽器中新增 passive 標記。

如果您只支援支援被動事件監聽器的瀏覽器,請直接新增標記。例如:

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

如果您要支援不支援被動事件監聽器的舊版瀏覽器,就必須使用功能偵測或 polyfill。如需瞭解詳情,請參閱 WICG 被動事件監聽器說明文件的「功能偵測」一節。

資源