Der Renderer-Prozess des Browsers wandelt den Code in eine Webseite um, mit der Nutzer interagieren können. Standardmäßig verarbeitet der Hauptthread des Rendererprozesses den meisten Code: Er parst den HTML-Code und erstellt das DOM, parst den CSS-Code, wendet die angegebenen Stile an und parst, wertet und führt den JavaScript-Code aus.
Im Hauptthread werden auch Nutzerereignisse verarbeitet. Jedes Mal, wenn der Hauptthread mit etwas anderem beschäftigt ist, reagiert Ihre Webseite möglicherweise nicht auf Nutzerinteraktionen, was die Nutzung beeinträchtigt.
Wie die Arbeitsprüfung des Lighthouse-Hauptthreads fehlschlägt
Lighthouse kennzeichnet Seiten, die den Hauptthread während des Ladevorgangs länger als vier Sekunden aktiv halten:
![Screenshot der Arbeitsprofil-Prüfung „Minimieren“ von Lighthouse](https://developer.chrome.com/static/docs/lighthouse/performance/mainthread-work-breakdown/image/a-screenshot-the-lightho-2e9196c10c9b.png?authuser=6&hl=de)
Damit Sie die Quellen der Last des Hauptthreads leichter identifizieren können, zeigt Lighthouse eine Aufschlüsselung der CPU-Zeit an, die während des Ladens der Seite im Browser verbracht wurde.
So minimieren Sie den Aufwand für den Hauptthread
Die folgenden Abschnitte sind nach den von Lighthouse gemeldeten Kategorien geordnet. Einen Überblick über das Rendern von Webseiten in Chromium finden Sie unter Aufbau eines Frames.
Unter Weniger Aufwand für Hauptthreads erfahren Sie, wie Sie mit den Chrome-Entwicklertools genau untersuchen können, was Ihr Hauptthread beim Laden der Seite tut.
Skriptauswertung
Stil und Layout
- Umfang und Komplexität von Stilberechnungen reduzieren
- Keine großen, komplexen Layouts und Layoutüberlastungen
Rendering
- Eigenschaften nur für das Komposit-Tool beibehalten und die Anzahl der Ebenen verwalten
- Farben und Lackierungen vereinfachen