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

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

瀏覽器相容性

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

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

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

Lighthouse 稽核顯示頁面未使用被動事件監聽器來改善捲動效能

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

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

Lighthouse 會篩除來自不同主機的事件監聽器,因為您可能無法控制這些指令碼。有些第三方指令碼可能會損害網頁的捲動效能,但這些指令碼不會顯示在 Lighthouse 報表中。

如何將事件監聽器設為被動,以改善捲動效能

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

如果只支援支援被動事件監聽器的瀏覽器,只要加入旗標即可。例如:

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

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

資源