Wiedza / Diagramy / Wydajność i obrazy

Budżet głównego wątku i ciężki JavaScript

Główny wątek wykonuje jedno zadanie naraz. Zadanie dłuższe niż 50 ms jest długim zadaniem; podział pracy i oddawanie sterowania pozwalają wcześniej obsłużyć interakcję oraz narysować odpowiedź.

Co pokazuje ten diagram?

Od pobrania zasobów do wyrenderowania stabilnego widoku oraz pomiaru Core Web Vitals.

JavaScript (JS) to język, który ożywia stronę w przeglądarce: obsługuje kliknięcia, pobiera dane, animuje, zmienia treść bez przeładowania. To trzeci filar frontendu — obok HTML (struktura) i CSS (wygląd).

Pomaga połączyć wynik PageSpeed lub audytu z konkretną fazą ładowania, formatem obrazu albo protokołem.

Jak czytać schemat

1. Ten sam zakres pracy, zupełnie inna responsywność
2. 1 zadanie — 180 ms
3. Ciężki JavaScript blokuje wątek — parsowanie · logika · third-party · layout
4. klik czeka ↓
5. UI
6. > 50 ms = długie zadanie i czas blokowania interakcji
7. 4 porcje — ≤ 50 ms
8. Praca A

Pełne wyjaśnienie pojęcia

JavaScript (JS) — Język interaktywności w przeglądarce.

Jak użyć diagramu?

Otwórz sam plik SVG, aby powiększyć go bez utraty jakości, albo odwołaj się do tej strony, gdy potrzebujesz również opisu, legendy i powiązanych materiałów.

Powiązane poradniki

• Jak poprawić Core Web Vitals — LCP, INP i CLS po kolei

Wszystkie diagramy · Poradniki · Słownik