Profiling mit dem Performance-Tab der Vue Devtools
Komponentenaktualisierungen aufzeichnen, unnötige Re-Renders erkennen und Komponentenlaufzeiten analysieren
Profiling mit dem Performance-Tab der Vue Devtools ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Profiling wichtig ist
Vor einer Optimierung müssen Sie wissen, wofür die Zeit aufgewendet wird. Die Vue DevTools enthalten eine Performance-/Timeline-Ansicht, die Komponenten-Renderings aufzeichnet. So finden Sie unnötige Arbeit, statt zu raten.
Vue DevTools installieren
Installieren Sie die Browser-Erweiterung oder führen Sie die eigenständige App aus. In Vite-Projekten fügt das Plugin vite-plugin-vue-devtools einen Inspector innerhalb der App hinzu.
npm install -D vite-plugin-vue-devtoolsEine Aufzeichnung starten
Öffnen Sie in den DevTools den Tab für Timeline oder Performance und starten Sie die Aufzeichnung. Interagieren Sie anschließend mit Ihrer App. Beenden Sie die Aufzeichnung, um die Render-Aktivitäten für diesen Zeitraum zu erfassen.
Die Render-Timeline der Komponenten
Jedes Rendern einer Komponente erscheint als Ereignis in der Timeline. Sie sehen, wann eine Komponente erneut gerendert wurde und wie lange das Rendern gedauert hat.
Der Commit-Graph
Ein Commit ist eine einmalige Übertragung von Aktualisierungen in das DOM. Der Commit-Graph zeigt jeden Commit und die darin gerenderten Komponenten. So erkennen Sie Commits, die deutlich mehr Komponenten als erwartet betreffen.
Flammendiagramm der Komponentenlaufzeiten
Das Flammendiagramm stapelt die Render-Dauern von Eltern- und Kindkomponenten. Breite Balken stehen für langsame Render-Vorgänge, tiefe Stapel zeigen, wie sich das Rendern durch den Baum fortsetzt.
Unnötige Render-Vorgänge erkennen
Ein unnötiger Render-Vorgang liegt vor, wenn eine Komponente erneut gerendert wurde, aber dieselbe Ausgabe erzeugt hat. Solche Vorgänge erscheinen als wiederholte Render-Ereignisse, deren Ergebnis das DOM nicht verändert hat.
Gleiche Ausgabe, neues Rendering
Eine häufige Ursache ist, dass bei jedem Rendern ein neu erstelltes Objekt oder eine Inline-Arrow-Funktion als Prop übergeben wird und dadurch die Memoisierung verhindert wird. Die untergeordnete Komponente wird erneut gerendert, obwohl ihre sichtbare Ausgabe identisch ist.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />Stabile Referenzen verwenden
Ziehen Sie Konstanten nach oben oder kapseln Sie abgeleitete Daten in computed, damit bei jedem Rendern dieselbe Referenz übergeben wird.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));Mit Interaktionen abgleichen
Die Timeline zeichnet auch Maus- und Tastaturereignisse auf. Ordnen Sie einem langsamen Commit die Interaktion zu, die ihn ausgelöst hat, um den genauen zu optimierenden Codepfad zu finden.
Render-Zähler im Komponenteninspektor
Der Komponenteninspektor kann Komponenten hervorheben, sobald sie aktualisiert werden. Wenn ein Zähler bei jeder nicht zusammenhängenden Zustandsänderung aufblinkt, erkennen Sie übermäßiges Rendern sofort.
Kurze Überprüfung
Was stellt der Commit-Graph im Performance-Tab dar?
Zusammenfassung
Verwenden Sie den Performance-/Timeline-Tab der Vue DevTools, um Render-Vorgänge aufzuzeichnen. Der Commit-Graph zeigt jeden DOM-Flush und die dabei gerenderten Komponenten, während das Flame-Chart langsame Render-Vorgänge sichtbar macht. Achten Sie auf unnötige Render-Vorgänge – Komponenten, die erneut gerendert werden, ohne ihre Ausgabe zu ändern, häufig verursacht durch instabile Prop-Referenzen – und beheben Sie sie mit nach oben gezogenen Konstanten oder computed.
Häufig gestellte Fragen
Ist die Lektion „Profiling mit dem Performance-Tab der Vue Devtools“ kostenlos?
Ja — der vollständige Text von „Profiling mit dem Performance-Tab der Vue Devtools“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Profiling mit dem Performance-Tab der Vue Devtools“?
Komponentenaktualisierungen aufzeichnen, unnötige Re-Renders erkennen und Komponentenlaufzeiten analysieren Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 2 von 4.
Wie lange dauert die Lektion „Profiling mit dem Performance-Tab der Vue Devtools“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- v-memo zur Template-Memoisierung
- Profiling mit dem Performance-Tab der Vue Devtools
- Virtuelles Scrollen für große Listen
- Web Worker mit Vue