Długie zadanie to kod JavaScript, który przez dłuższy czas monopolizuje wątek główny, powodując, że interfejs się zawiesza.
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 kliknięcia często nie działają, ponieważ funkcje interaktywne, takie jak detektory zdarzeń i moduły obsługi kliknięć, nie zostały jeszcze dołączone do elementów interfejsu. Z tego powodu długie zadania mogą znacznie wydłużyć czas do interakcji.
Narzędzia deweloperskie w Chrome mogą teraz wizualizować długie zadania, dzięki czemu łatwiej jest zobaczyć zadania wymagające optymalizacji.
Co zalicza się do długiego zadania?
Długie zadania obciążające procesor są spowodowane złożonymi zadaniami, które trwają dłużej niż 50 ms. Model RAIL sugeruje przetwarzanie zdarzeń wejściowych użytkownika w ciągu 50 ms, aby uzyskać widoczną odpowiedź w ciągu 100 ms i zachować połączenie między działaniem a reakcją.
Co ważne, model RAIL sugeruje uzyskanie odpowiedzi wizualnej na dane wprowadzane przez użytkownika w ciągu 100 ms, ale progi danych interakcji z następnym wyrenderowaniem (INP) pozwalają uzyskać lepsze oczekiwania do 200 ms, zwłaszcza w przypadku wolniejszych urządzeń.
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ść.
Aby ułatwić Ci kontrolę wydajności, Narzędzia deweloperskie mogą teraz wizualizować długie zadania. Zadania (wyświetlane na szaro) są oznaczone czerwonymi flagami, gdy są to Długie zadania.
Aby użyć nowego narzędzia do wizualizacji:
- Zarejestruj log czasu w panelu Wydajność wczytywania strony internetowej.
- Poszukaj ostrzeżenia w głównym widoku wątku. Zadania powinny być teraz zaznaczone na szaro i z etykietą Zadanie.
- Najedź kursorem na szary pasek. Pojawi się okno z informacją o czasie trwania zadania i o tym, czy jest ono uznawane za długie.
Co powoduje moje długie zadania?
Aby poznać przyczynę długiego zadania, wybierz szary pasek zadania. W szufladzie poniżej wybierz Od dołu i Grupuj według aktywności. Dzięki temu możesz zobaczyć, które działania najbardziej (łącznie) miały największy wpływ na czas trwania zadania. W poniższym przykładzie przyczyna opóźnienia wygląda jak kosztowny zestaw zapytań DOM.
Jakie są typowe sposoby optymalizacji długich zadań?
Duże skrypty są często główną przyczyną długich zadań. Rozważ ich podzielenie. Zwróć też uwagę na skrypty innych firm, które mogą też zawierać długie zadania, które opóźniają interaktywność głównej zawartości.
Podziel całą pracę na fragmenty trwające poniżej 50 ms i uruchamiaj je w odpowiednim miejscu i czasie. Odpowiednie miejsce dla niektórych z nich może znajdować się w wątku głównym, w skrypcie service worker. Wskazówki dotyczące podziału długich zadań znajdziesz w artykułach Optimize Long Tasks (Optymalizacja długich zadań) i Idle Until Urgent Phila Waltona.
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 Wskaźniki wydajności ukierunkowane na użytkownika.