Geschwindigkeit

Lange JavaScript-Aufgaben blockieren den Haupt-Thread

Üblicher Schweregrad: mittel · Aufwand: mittel

Woran du es erkennst

Der Browser maß während des Tests Haupt-Thread-Aufgaben über 50 ms; ihre Total Blocking Time (Summe der Zeit über je 50 ms) liegt über 200 ms — Klicks und Tasteneingaben warten hinter der Skriptausführung.

Warum es zählt

Solange eine lange Aufgabe läuft, kann der Browser weder auf Eingaben reagieren noch den Bildschirm aktualisieren — jede Millisekunde über 50 ms pro Aufgabe ist direkt spürbare Trägheit. TBT ist das einzige Interaktivitäts-Signal, das ohne Nutzereingabe messbar ist, und es hängt eng mit schlechten INP-Werten im Feld zusammen.

So behebst du es

  1. Lange Aufgaben zerlegen: Arbeit in Häppchen unter 50 ms aufteilen (zwischendurch an den Scheduler abgeben, dringendes voran, Rest per requestIdleCallback), damit Eingaben dazwischenkommen.
  2. Schwere Berechnungen in einen Web Worker auslagern; der Haupt-Thread bleibt für Oberflächen-Updates reserviert.
  3. Prüfen, was beim Laden läuft — das Parsen übergroßer Bündel ist der häufigste Verursacher; aufteilen und nachladen, was der erste Bildaufbau nicht braucht.
  4. Mit gedrosselter CPU nachmessen (DevTools → Performance → 4x slowdown): Die markierten Aufgaben im Main-Track nennen die genauen Funktionen.

Zum Nachlesen