Używanie detektorów pasywnych do poprawy działania przewijania

Odbiorniki zdarzeń dotykowych i zdarzeń związanych z kółkiem przewijania są przydatne do śledzenia interakcji użytkowników i tworzenia niestandardowych funkcji przewijania, ale mogą też opóźniać przewijanie strony. Obecnie przeglądarki nie wiedzą, czy odbiornik zdarzeń zapobiegnie przewijaniu, dlatego zawsze czekają na zakończenie jego działania, zanim przewiną stronę. Pasywne detektory zdarzeń rozwiązują ten problem, ponieważ pozwalają wskazać, że detektor zdarzeń nigdy nie będzie zapobiegać przewijaniu.

Zgodność z przeglądarką

Większość przeglądarek obsługuje pasywne detektory zdarzeń. Zobacz sekcję Zgodność z przeglądarką

Przyczyna niepowodzenia audytu pasywnego detektora zdarzeń w Lighthouse

Lighthouse oznacza detektory zdarzeń, które mogą opóźniać przewijanie strony:

Audyt Lighthouse pokazuje, że strona nie używa pasywnych detektorów zdarzeń do poprawy działania przewijania

Lighthouse identyfikuje detektory zdarzeń, które mogą wpływać na wydajność przewijania, w ten sposób:

  1. Zbiera wszystkie detektory zdarzeń na stronie.
  2. Odfiltrowywanie słuchaczy, którzy nie korzystają z dotyku ani kółka.
  3. Odfiltruj słuchaczy, którzy dzwonią pod numer preventDefault().
  4. Filtruj słuchaczy, którzy pochodzą z innego hosta niż strona.

Lighthouse odfiltrowuje odbiorców z różnych hostów, ponieważ prawdopodobnie nie masz kontroli nad tymi skryptami. Mogą istnieć skrypty innych firm, które pogarszają wydajność przewijania strony, ale nie są one wymienione w raporcie Lighthouse.

Jak sprawić, aby detektory zdarzeń były pasywne, aby poprawić działanie przewijania

Dodaj flagę passive do każdego detektora zdarzeń, który został zidentyfikowany przez Lighthouse.

Jeśli obsługujesz tylko przeglądarki, które obsługują pasywne detektory zdarzeń, wystarczy dodać flagę. Na przykład:

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

Jeśli obsługujesz starsze przeglądarki, które nie obsługują pasywnych detektorów zdarzeń, musisz użyć wykrywania funkcji lub polyfill. Więcej informacji znajdziesz w sekcji Wykrywanie funkcji w dokumencie wyjaśniającym WICG Pasywne detektory zdarzeń.

Zasoby