Performance

Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen Überblick (en-US) über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der Bildrate (en-US) über dem Profil.

Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:

  • Der Wasserfall (en-US) zeigt die verschiedenen Vorgänge, die der Browser ausgeführt hat, z. B. die Ausführung von Layout, JavaScript, Repaints und Garbage Collection
  • Der Aufrufbaum (en-US) zeigt die JavaScript-Funktionen, in denen der Browser die meiste Zeit verbracht hat
  • Das Flammendiagramm (en-US) zeigt den JavaScript-Aufrufstack über den Verlauf der Aufzeichnung
  • Die Allokationsansicht (en-US) zeigt die von Ihrem Code im Verlauf der Aufzeichnung vorgenommenen Heap-Zuordnungen an. Diese Ansicht wird nur angezeigt, wenn Sie in den Einstellungen des Leistungstools die Option "Datensatzzuordnungen" aktiviert haben.


Erste Schritte

UI Tour (en-US)

Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.

How to (en-US)
Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen

Komponenten des Performance-Tools

Bildrate (en-US)
Understand your site's overall responsiveness.
Aufruf-Baum (en-US)
Find bottlenecks in your site's JavaScript.
Allokationen (en-US)
See the allocations made by your code over the course of the recording.
Wasserfall (en-US)
Understand the work the browser's doing as the user interacts with your site.
Flammendiagramm (en-US)
See which JavaScript functions are executing, and when, over the course of the recording.
 

Scenarios

Animieren von CSS-Eigenschaften (en-US)
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
 
Intensives JavaScript (en-US)
Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.