Odbiór modułów obsługi danych wejściowych

Moduły obsługi danych wejściowych mogą być przyczyną problemów z wydajnością aplikacji, ponieważ mogą blokować wyświetlanie klatek i generować dodatkową lub niepotrzebną pracę układu.

Paul Lewis

Moduły obsługi danych wejściowych mogą być przyczyną problemów z wydajnością w aplikacjach, ponieważ mogą blokować odtwarzanie ramek i powodować dodatkowe lub niepotrzebne prace nad układem.

Podsumowanie

• Unikaj długo działających modułów obsługi danych wejściowych, ponieważ mogą one blokować przewijanie.
• Nie wprowadzaj zmian stylu w modułach obsługi danych wejściowych.
• Odbij moduły obsługi, przechowuj wartości zdarzeń i uwzględniaj zmiany stylu w następnym wywołaniu zwrotnym requestAnimationFrame.

Unikaj długo działających modułów obsługi danych wejściowych

Gdy użytkownik wchodzi w interakcję ze stroną, w najkrótszym możliwym przypadku jego wątek kompozytora może po prostu przenosić treść dotykowo. Nie wymaga to żadnej pracy ze strony głównego wątku, w którym są wykonywane JavaScript, układy, style lub malowanie.

Jeśli jednak dołączysz moduł obsługi danych wejściowych, np. touchstart, touchmove lub touchend, wątek kompozytora musi czekać na zakończenie wykonywania tego modułu, ponieważ możesz wywołać metodę preventDefault() i zatrzymać przewijanie dotykiem. Nawet jeśli nie wywołasz funkcji preventDefault(), kompozytor musi czekać, a w związku z tym przewijanie przez użytkownika jest zablokowane, co może powodować zacinanie się i pomijanie klatek.

Krótko mówiąc, upewnij się, że wszystkie używane moduły obsługi danych wejściowych powinny być szybkie i umożliwić kompozytorowi wykonanie zadania.

Unikaj zmian stylów w modułach obsługi danych wejściowych

Moduły obsługi danych wejściowych, takie jak funkcje przewijania i dotykowe, są zaplanowane na uruchamianie tuż przed wywołaniami zwrotnymi requestAnimationFrame.

Jeśli wprowadzisz zmianę wizualną w jednym z tych modułów obsługi, na początku polecenia requestAnimationFrame pojawią się oczekujące zmiany stylu. Jeśli potem przeczytasz właściwości wizualne na początku wywołania zwrotnego requestAnimationFrame, zgodnie z radą w sekcji „Unikaj dużych, złożonych układów i nieuzasadnionego układu elementów”, aktywujesz wymuszony układ synchroniczny.

Odbiór modułów przewijania

Rozwiązanie obu powyższych problemów jest takie samo – zawsze należy odrzucić zmiany wizualne do następnego wywołania zwrotnego requestAnimationFrame:

function onScroll (evt) {

    // Store the scroll value for laterz.
    lastScrollY = window.scrollY;

    // Prevent multiple rAF callbacks.
    if (scheduledAnimationFrame)
    return;

    scheduledAnimationFrame = true;
    requestAnimationFrame(readAndUpdatePage);
}

window.addEventListener('scroll', onScroll);

Dodatkową zaletą takiego rozwiązania jest to, że moduły obsługi wprowadzania danych są lekkie, co jest świetnym rozwiązaniem.