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

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

Zgodność z przeglądarką

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

Dlaczego audyt pasywnego detektora zdarzeń w Lighthouse kończy się niepowodzeniem

Lighthouseflaguje 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 używa tego procesu do identyfikowania detektorów zdarzeń, które mogą wpływać na wydajność przewijania:

  1. Zebrać wszystkie detektory zdarzeń na stronie.
  2. odfiltrowuje słuchaczy, którzy nie korzystają z dotyku ani koła;
  3. odfiltruj słuchaczy, którzy dzwonią na numer preventDefault();
  4. odfiltrowywać słuchaczy, którzy pochodzą z innego hosta niż strona.

Lighthouse odfiltrowuje słuchaczy z różnych hostów, ponieważ prawdopodobnie nie masz kontroli nad tymi skryptami. Skrypty innych firm mogą negatywnie wpływać na wydajność przewijania strony, ale nie są wymienione w raporcie Lighthouse.

Jak uczynić detektory zdarzeń pasywnymi, aby poprawić działanie przewijania

Dodaj flagę passive do każdego wykrytego przez Lighthouse odbiornika zdarzeń.

Jeśli obsługujesz tylko przeglądarki z obsługą pasywnego detektora zdarzeń, po prostu dodaj 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ć funkcji wykrywania lub polyfilla. Więcej informacji znajdziesz w sekcji Wykrywanie funkcji w dokumentacji WICG Pasywne detektory zdarzeń.

Zasoby