Passive Listener verwenden, um die Scrollleistung zu verbessern

Touch- und Rad-Ereignis-Listener sind nützlich, um Nutzerinteraktionen zu erfassen und benutzerdefinierte Scrollfunktionen zu erstellen. Sie können jedoch auch das Scrollen der Seite verzögern. Derzeit können Browser nicht erkennen, ob ein Ereignis-Listener das Scrollen verhindert. Daher warten sie immer, bis die Ausführung des Listeners abgeschlossen ist, bevor sie die Seite scrollen. Mit passiven Ereignis-Listenern können Sie angeben, dass ein Ereignis-Listener niemals das Scrollen verhindert.

Browserkompatibilität

Passive Ereignis-Listener werden von den meisten Browsern unterstützt. Weitere Informationen finden Sie unter Browserkompatibilität.

Gründe für den Fehler bei der Prüfung passiver Event-Listener in Lighthouse

Lighthouse meldet Event-Listener, die das Scrollen der Seite verzögern können:

Lighthouse-Analyse zeigt, dass die Seite keine passiven Ereignis-Listener zur Verbesserung der Scrollleistung verwendet

Lighthouse verwendet den folgenden Prozess, um Ereignis-Listener zu identifizieren, die sich auf die Scrollleistung auswirken können:

  1. Alle Ereignis-Listener auf der Seite erfassen
  2. Filtern Sie Listener heraus, die nicht über Touchbedienung oder ein Rad verfügen.
  3. Filtern Sie Listener heraus, die preventDefault() aufrufen.
  4. Filtern Sie Listener heraus, die von einem anderen Host als der Seite stammen.

Lighthouse filtert Listener von verschiedenen Hosts heraus, da Sie wahrscheinlich keine Kontrolle über diese Scripts haben. Möglicherweise gibt es Drittanbieter-Scripts, die die Scrollleistung Ihrer Seite beeinträchtigen, die aber nicht in Ihrem Lighthouse-Bericht aufgeführt sind.

Event-Listener zur Verbesserung der Scrollleistung passiv machen

Fügen Sie jedem von Lighthouse erkannten Ereignis-Listener das Flag passive hinzu.

Wenn Sie nur Browser unterstützen, die passive Event-Listener unterstützen, fügen Sie einfach das Flag hinzu. Beispiel:

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

Wenn Sie ältere Browser unterstützen, die passive Event-Listener nicht unterstützen, müssen Sie die Feature-Erkennung oder eine Polyfill verwenden. Weitere Informationen finden Sie im Abschnitt Feature-Erkennung des WICG-Erläuterungsdokuments Passive event listeners.

Ressourcen