Długie zadanie to kod JavaScript, który monopolizuje wątek główny przez dłuższy czas, powodując „zawieszanie się” interfejsu.
Podczas wczytywania strony długie zadania mogą blokować wątek główny i uniemożliwiać stronie reagowanie na dane wejściowe użytkownika, nawet jeśli wygląda na gotową do użycia. Kliknięcia i dotknięcia często nie działają, ponieważ funkcje interaktywne, takie jak detektory zdarzeń i moduły obsługi kliknięć, nie zostały jeszcze przypisane do elementów interfejsu. Z tego powodu długie zadania mogą znacznie wydłużać czas do pełnej interaktywności.
Narzędzia deweloperskie Chrome mogą teraz wizualizować długie zadania, dzięki czemu łatwiej jest zobaczyć zadania, które wymagają optymalizacji.
Co zaliczamy do długiego zadania?
Długie zadania obciążające procesor są spowodowane złożonymi operacjami, które trwają dłużej niż 50 ms. Model RAIL zaleca przetwarzanie zdarzeń wprowadzania danych przez użytkownika w ciągu 50 ms, aby zapewnić widoczną odpowiedź w ciągu 100 ms i utrzymać połączenie między działaniem a reakcją.
Ważna informacja: model RAIL sugeruje, że czas reakcji wizualnej na dane wejściowe użytkownika powinien wynosić 100 ms, ale progi danych czas od interakcji do kolejnego wyrenderowania (INP) pozwalają na ustawienie bardziej osiągalnego czasu do osiągnięcia, zwłaszcza na wolniejszych urządzeniach.
Czy na mojej stronie są długie zadania, które mogą opóźnić interaktywność?
Do tej pory trzeba było ręcznie szukać w narzędziach Chrome DevTools „długich żółtych bloków” kodu o długości przekraczającej 50 ms lub używać interfejsu Long Tasks API, aby dowiedzieć się, które zadania opóźniają interaktywność.
Aby ułatwić Ci proces weryfikacji skuteczności, DevTools wyświetla teraz długotrwałe zadania. Zadania (wyświetlane na szaro) mają czerwone flagi, jeśli są długimi zadaniami.
Aby użyć nowego narzędzia do wizualizacji:
- Wykonaj w panelu Skuteczność śledzenie wczytywania strony internetowej.
- Poszukaj czerwonej flagi w widoku głównego wątku. Zadania powinny być teraz oznaczone na szaro i nazwane Zadanie.
- Najedź kursorem na szary pasek. Pojawi się okno z czasem trwania zadania i informacją, czy jest ono długie.
Co powoduje długie zadania?
Aby dowiedzieć się, dlaczego zadanie trwa tak długo, kliknij szary pasek Zadanie. W dolnym menu kliknij Od dołu i Pogrupuj według aktywności. Dzięki temu możesz sprawdzić, które czynności miały największy wpływ na czas wykonania zadania. W tym przykładzie przyczyną opóźnienia jest kosztowny zestaw zapytań DOM.
Jakie są najczęstsze sposoby optymalizacji długich zadań?
Duże skrypty są często główną przyczyną długich zadań. Rozważ ich podział. Zwróć też uwagę na skrypty innych firm, które mogą zawierać długie zadania opóźniające interaktywność treści głównych.
Podziel całą pracę na fragmenty, które są wykonywane w mniej niż 50 ms, i wykonuj te fragmenty we właściwym miejscu i w odpowiednim czasie. Niektóre z nich mogą być wykonywane poza wątkiem głównym, w ramach usługi workera. Wskazówki dotyczące dzielenia długich zadań znajdziesz w artykule Optymalizacja długich zadań oraz w artykule Idle Until Urgent Phila Waltona.
Zadbaj o responsywność stron. Minimalizowanie długich zadań to świetny sposób na zapewnienie użytkownikom przyjemnego korzystania z Twojej witryny. Więcej informacji o długich zadaniach znajdziesz w artykule Dane o wydajności zorientowane na użytkownikach.