Pasywne nasłuchiwanie zdarzeń

Silktide ładuje Twoje strony w rzeczywistej przeglądarce i wyszukuje skrypty nasłuchujące zdarzeń dotykowych oraz zdarzeń kółka myszy w sposób, który może opóźniać przewijanie. Oznaczenie tych nasłuchiwań jako pasywnych pozwala przeglądarce przewijać od razu.

Gdy skrypt nasłuchuje zdarzeń dotykowych lub zdarzeń kółka myszy, przeglądarka musi poczekać na wykonanie tego skryptu przed rozpoczęciem przewijania — na wypadek, gdyby skrypt anulował przewijanie. Na stronach z dużą ilością treści powoduje to zacinanie się lub opóźnienia przewijania — jeden z najbardziej zauważalnych rodzajów zakłóceń płynności, szczególnie na telefonach.

Dlaczego to ważne

Przewijanie jest zdecydowanie najczęstszą czynnością wykonywaną przez odwiedzających na stronie, a ludzie natychmiast zauważają, gdy nie jest ono płynne. Strona, która zawiesza się lub drga pod palcem, sprawia wrażenie uszkodzonej, nawet gdy wszystko na niej działa. Jest to szczególnie odczuwalne na urządzeniach mobilnych, gdzie przewijanie dotykowe jest nieustanne.

Jak to naprawić

Oznacz nasłuchiwania zdarzeń dotykowych i zdarzeń kółka myszy jako pasywne, co zapewnia przeglądarkę, że nigdy nie anulują one przewijania:

// Blokuje przewijanie do czasu uruchomienia procedury obsługi
document.addEventListener('touchstart', onTouchStart);

// Pasywne: przeglądarka przewija od razu
document.addEventListener('touchstart', onTouchStart, { passive: true });

Dodaj { passive: true } do własnych nasłuchiwań touchstart, touchmove, wheel i mousewheel, chyba że nasłuchiwanie rzeczywiście wywołuje preventDefault(), aby zatrzymać przewijanie.
W przypadku zgłoszonych nasłuchiwań wewnątrz skryptów innych firm sprawdź, czy dostępna jest nowsza wersja biblioteki, lub zgłoś problem dostawcy — zobacz kod innych firm.

Wszystkie nowoczesne przeglądarki obsługują pasywne nasłuchiwanie zdarzeń; tylko bardzo stare przeglądarki wymagają wykrywania obsługi tej funkcji.

Jak Silktide to testuje

Ładuje stronę w rzeczywistej przeglądarce i wyszukuje nasłuchiwania zdarzeń dotykowych oraz zdarzeń kółka myszy, które nie są oznaczone jako pasywne i mogą opóźniać przewijanie.
Zgłasza skrypt zawierający każde takie nasłuchiwanie wraz z linią, w której jest ono rejestrowane.

Rozwiązywanie problemów

Moje nasłuchiwanie musi anulować przewijanie

Nasłuchiwanie, które rzeczywiście wywołuje preventDefault(), aby zatrzymać przewijanie, nie może być pasywne — oznaczenie go jako pasywnego spowoduje, że przeglądarka zignoruje wywołanie preventDefault(). Jeśli zgłoszone nasłuchiwanie naprawdę musi anulować przewijanie, pozostawienie go jako niepasywnego jest właściwe; rozważ ograniczenie miejsca, w którym jest dołączane, aby nie wpływało na przewijanie w innych częściach strony.