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.
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.