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 wissen, ob ein Ereignis-Listener das Scrollen verhindert, sodass sie immer warten, bis der Listener die Ausführung beendet hat, bevor auf der Seite gescrollt wird. Passive Ereignis-Listener lösen dieses Problem, indem Sie dass ein Ereignis-Listener nie 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-Prüfung zeigt, dass auf der Seite keine passiven Ereignis-Listener verwendet werden, um die Scrollleistung zu verbessern

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

  1. Erfassen Sie alle Ereignis-Listener auf der Seite.
  2. Filtern Sie Hörer ohne Touch-Funktion und ohne Rad heraus.
  3. Filtern Sie Listener heraus, die preventDefault() aufrufen.
  4. Sie können Listener herausfiltern, die von einem anderen Host als die Seite stammen.

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

So machen Sie Event-Listener passiv und verbessern die Scrollleistung

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 in der Funktionserkennung des WICG-Abschnitts Passive Ereignis-Listener .

Ressourcen