Dowiedz się, jak diagnozować kosztowne prace, które uniemożliwiają użytkownikom interakcję.
Długie zadania mogą zapewniać zajęcie wątku głównego, co opóźnia interakcję użytkownika. Narzędzia deweloperskie w Chrome mogą teraz wizualizować długie zadania, co ułatwia wyświetlanie zadań do optymalizacji.
Jeśli do kontroli stron używasz narzędzia Lighthouse, być może znasz Czas do interakcji – dane, które określają, kiedy użytkownicy mogą wejść w interakcję ze stroną i otrzymać odpowiedź. Ale czy wiesz, że długie zadania (JavaScript) mogą mieć duży wpływ na niewłaściwą zamianę tekstu na mowę?
Czym są długie zadania?
Long Task (Długie zadanie) to kod JavaScript, który przez dłuższy czas monopolizuje wątek główny, powodując „blokowanie się” UI.
Podczas ładowania strony długie zadania mogą powiązać wątek główny i sprawić, że strona nie będzie reagować na działania użytkownika, nawet jeśli wygląda na gotową. Kliknięcia i dotknięcia często nie działają, ponieważ detektory zdarzeń, moduły obsługi kliknięć itp. nie zostały jeszcze podłączone.
Długie zadania obciążające procesor są wynikiem złożonej pracy, która trwa dłużej niż 50 ms. Dlaczego 50 ms? Model RAIL sugeruje przetwarzanie zdarzeń wejściowych użytkownika w czasie 50 ms, aby odpowiedź była widoczna w ciągu 100 ms. Jeśli tego nie zrobisz, połączenie między akcją i reakcją zostanie przerwane.
Czy na mojej stronie znajdują się długie zadania, które mogą opóźnić interaktywność?
Do tej pory trzeba było ręcznie wyszukać „długie żółte bloki” skryptu o długości ponad 50 ms w Narzędziach deweloperskich w Chrome lub użyć interfejsu Long Tasks API, aby ustalić, które zadania opóźniają interaktywność. To może być trochę uciążliwe.
Aby ułatwić Ci kontrolę wydajności, Narzędzia deweloperskie wizualizują teraz długie zadania. Zadania (wyświetlane na szaro) są oznaczone czerwonymi flagami, gdy są to Długie zadania.
- Zarejestruj log czasu w panelu Wydajność wczytywania strony internetowej.
- Poszukaj ostrzeżenia w głównym widoku wątku. Zadania powinny być teraz wyświetlane na szaro („Zadanie”).
- Najechanie kursorem na słupek informuje o czasie trwania zadania i o tym, czy zostało ono uznane za „długie”.
Co powoduje moje długie zadania?
Aby sprawdzić, co powoduje długie zadanie, kliknij szary pasek zadania. W panelu poniżej wybierz Od dołu do góry i Grupuj według aktywności. Dzięki temu możesz zobaczyć, które aktywności najbardziej (łącznie) miały największy wpływ na czas trwania zadania. Poniżej wydaje się, że jest to kosztowny zestaw zapytań DOM.
Jakie są typowe sposoby optymalizacji długich zadań?
Duże skrypty są często główną przyczyną długich zadań, dlatego rozważ podzielenie ich. Zwróć też uwagę na skrypty innych firm. Ich długie zadania mogą opóźniać interaktywność głównej zawartości.
Podziel całą pracę na mniejsze fragmenty (trwające do 50 ms) i uruchom je we właściwym miejscu i czasie. Odpowiednie miejsce może nawet znajdować się poza głównym wątkiem – w instancji roboczej. Warto przeczytać książkę Idle Until Urgent Phila Waltona na ten temat. Przeczytaj też artykuł o optymalizowaniu długich zadań, aby poznać ogólne strategie zarządzania długimi zadaniami i ich podziału.
Zadbaj o elastyczność stron. Minimalizowanie długich zadań to świetny sposób na zapewnienie użytkownikom wygody korzystania z Twojej witryny. Więcej informacji o długich zadaniach znajdziesz w artykule o wskaźnikach wydajności nastawionych na użytkownika.