React Academy · Lektion

Den Profiler-Tab verwenden

Zeichnen Sie Render-Vorgänge auf, lesen Sie Flamegraphs und identifizieren Sie langsame Komponenten.

Den Profiler-Tab verwenden ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion verwenden Sie den React-DevTools-Profiler, um Render-Vorgänge aufzuzeichnen, Flammendiagramme zu lesen und Komponenten zu ermitteln, die Performance-Engpässe verursachen.

Den Profiler öffnen

Klicken Sie in React DevTools auf den Tab **Profiler** (neben Components). Dort sehen Sie eine Record-Schaltfläche (Kreis) sowie eine Reload-and-Profile-Schaltfläche. Der Profiler funktioniert nur im Entwicklungsmodus.

Eine Sitzung aufzeichnen

Klicken Sie auf **Record** (den Kreis), interagieren Sie mit Ihrer App (z. B. durch Klicken auf eine Schaltfläche oder Eingeben in ein Eingabefeld) und klicken Sie anschließend auf **Stop** (das Quadrat). DevTools erfasst jeden Render-Vorgang, der während der Sitzung stattgefunden hat.

Das Flammendiagramm lesen

Das Flammendiagramm zeigt pro Commit einen Balken für jede Komponente. Breite = Zeitaufwand für das Rendern. Hohe Stapel = tief verschachtelte Komponentenbäume. Bewegen Sie den Mauszeiger über einen Balken, um den Komponentennamen und die genaue Render-Dauer anzuzeigen.

Commit-Zeitachse

Oben im Profiler sehen Sie eine Reihe kleiner Balken – einen pro React-Commit. Höhere Balken stehen für langsamere Commits. Klicken Sie auf einen Balken, um zum Flammendiagramm dieses Commits zu springen.

Warum wurde eine Komponente gerendert?

Wählen Sie eine Komponente im Flame Graph aus und sehen Sie sich den Abschnitt **Warum wurde dies gerendert?** an. Dort sehen Sie, ob die Komponente gerendert wurde, weil sich Props oder der State geändert haben oder weil eine übergeordnete Komponente erneut gerendert wurde.

Graue und farbige Balken

Graue Balken bedeuten, dass die Komponente in diesem Commit **nicht** gerendert wurde (React hat die vorherige Ausgabe wiederverwendet). Farbige Balken bedeuten, dass sie erneut gerendert wurde – dunklere Farben weisen auf längere Renderzeiten hin.

Die Ansicht „Ranked Chart“

Wechseln Sie vom Flame Graph zum **Ranked**-Diagramm (über den Schalter oben). Dort werden alle gerenderten Komponenten nach Renderzeit sortiert aufgelistet, sodass Sie die langsamste Komponente sofort erkennen.

Aufzeichnen und neu laden

Klicken Sie statt auf „Record“ auf **Reload and Profile**, um den Seitenaufruf einschließlich der ersten Render-Vorgänge aufzuzeichnen. So finden Sie Komponenten, die beim ersten Mount langsam sind.

Profiling in der Produktion aktivieren

Produktions-Builds deaktivieren den Profiler standardmäßig. Um die Produktion zu profilieren, erstellen Sie den Build mit `react-dom/profiling` als Alias und `scheduler/tracing-profiling`. Die meisten Teams führen das Profiling zunächst in der Entwicklungsumgebung durch.

Kurzer Test

Was stellt die Breite eines Balkens im Flame Graph des React DevTools Profilers dar?

Zusammenfassung

Sie können jetzt eine Profiler-Sitzung aufzeichnen, Flame Graphs und Ranked Charts lesen, überprüfen, warum eine Komponente erneut gerendert wurde, und mithilfe der Commit-Zeitachse zwischen Render-Vorgängen navigieren.

Als Nächstes

Nächste Lektion: **Häufige React-Fehler debuggen** – Sie diagnostizieren Warnungen zu fehlenden Keys, Fehler durch einen undefinierten State und Hydration-Abweichungen mithilfe der DevTools und der Browserkonsole.

Häufig gestellte Fragen

Ist die Lektion „Den Profiler-Tab verwenden“ kostenlos?

Ja — der vollständige Text von „Den Profiler-Tab verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Den Profiler-Tab verwenden“?

Zeichnen Sie Render-Vorgänge auf, lesen Sie Flamegraphs und identifizieren Sie langsame Komponenten. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Den Profiler-Tab verwenden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy