Analysieren der Laufzeitleistung (Tutorial)

Die Laufzeitleistung gibt die Leistung Ihrer Webseite an, wenn sie ausgeführt wird, im Gegensatz zum Laden. Im folgenden Lernprogramm erfahren Sie, wie Sie das DevTools-Leistungstool verwenden, um die Laufzeitleistung zu analysieren.

Die Fähigkeiten, die Sie in diesem Tutorial erlernen, sind nützlich für die Analyse des Ladens, der Interaktivität und der visuellen Stabilität Ihrer Webinhalte, die auch Schlüsselindikatoren für Core Web Vitals sind. Jedes der Core Web Vitals repräsentiert eine bestimmte Facette der Benutzererfahrung, ist in der Praxis messbar und spiegelt die reale Erfahrung eines kritischen benutzerzentrierten Ergebnisses wider. Sie können diese Core Web Vitals im Leistungstool sehen.

Siehe auch:

• Web Vitals at web.dev.
• Terminologie im Performance-Tool: Analysieren Sie die Leistung Ihrer Website.
• Optimieren Sie die Websitegeschwindigkeit mithilfe von Lighthouse

Schritt 1: Öffnen Sie die Demo im InPrivate-Modus und öffnen Sie DevTools

Im folgenden Tutorial öffnen Sie DevTools auf der Demowebseite "Träge Animation" und verwenden das Leistungstool, um einen Leistungsengpass auf der Webseite zu finden.

1. Klicken Sie mit der rechten Maustaste auf den Link "Träge Animation", und wählen Sie dann "Link im InPrivate-Fenster öffnen" aus.

   Sie erstellen ein Profil dieser Demo-Webseite, auf der eine variable Anzahl von Symbolen angezeigt wird, die sich nach oben und unten bewegen. Den Quellcode für die Demo finden Sie unter MicrosoftEdge / Demos > devtools-performance-get-started.

   Der InPrivate-Modus stellt sicher, dass der Browser in einem sauberen Zustand ausgeführt wird. Wenn Sie beispielsweise viele Erweiterungen installiert haben, können diese Erweiterungen Rauschen in Ihren Leistungsmessungen verursachen. Weitere Informationen finden Sie unter "InPrivate-Browsen in Microsoft Edge".

2. Klicken Sie mit der rechten Maustaste auf die Demo-Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet:

   

3. Klicken Sie oben rechts in DevTools auf die Schaltfläche DevTools anpassen und steuern () und dann neben "Andockposition" auf die Schaltfläche "In ein separates Fenster ausdocken " (").

Schritt 2: Drosseln der CPU, um eine mobile CPU zu simulieren

Mobile Geräte haben viel weniger CPU-Leistung als Desktops und Laptops. Wenn Sie ein Webseitenprofil erstellen, verwenden Sie die CPU-Drosselung, um die Leistung Ihrer Webseite auf mobilen Geräten zu simulieren.

Drosseln Sie die CPU Ihres Desktopcomputers, um eine mobile CPU wie folgt zu simulieren:

1. Öffnen Sie in DevTools das Tool Leistung ().

2. Klicken Sie auf die Schaltfläche Einstellungen mitschreiben ().

   DevTools zeigt Einstellungen, Dropdownmenüs und Kontrollkästchen im Zusammenhang mit der Erfassung von Leistungsmetriken an.

3. Wählen Sie im Dropdownmenü " CPU-Drosselung " oben links den empfohlenen Wert für die Verlangsamung aus, z. B. 4-fache Verlangsamung – empfohlen:

   

   Oder wählen Sie im Abschnitt Umgebungseinstellungen unten rechts im Dropdownmenü " CPU-Drosselung " den empfohlenen Wert für die Verlangsamung aus, z. B. 4-fache Verlangsamung – empfohlen. Die beiden Instanzen des Dropdownmenüs sind verknüpft.

   Der empfohlene Drosselungsfaktor wird von DevTools basierend auf Ihrem Computer berechnet. Um sicherzustellen, dass eine Webseite auch auf mobilen Geräten im unteren Preissegment gut funktioniert, wählen Sie im Dropdownmenü der CPU-Drosselung eine stärkere Verlangsamung aus, z. B. eine 6-fache Verlangsamung.

   DevTools drosselt Ihre CPU, sodass sie langsamer als gewöhnlich ist.

   Auf der Registerkarte des Leistungstools wird ein Drosselungswarnungssymbol () angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

4. Klicken Sie auf die Schaltfläche Einstellungen mitschreiben ().

   Die Einstellungs-Dropdownmenüs und Kontrollkästchen im Zusammenhang mit der Erfassung von Leistungsmetriken sind ausgeblendet.

Schritt 3: Füllen der Webseite mit einer idealen Anzahl von Symbolen

Füllen Sie die Demo-Webseite vor der Aufzeichnung der Leistung mit einer idealen Anzahl von Symbolen, um den nicht optimierten Code mit optimiertem Code zu vergleichen.

Um ein Paar Leistungsaufzeichnungen zu erstellen, um den nicht optimierten mit dem optimierten Code zu vergleichen, muss die Demo-Webseite zunächst je nach Computer eine bestimmte Anzahl beweglicher Symbole anzeigen. Es sollten genügend Symbole vorhanden sein, damit Sie einen Unterschied in Geschwindigkeit und Laufruhe der Animation deutlich erkennen können, wenn Sie zwischen der Auswahl des nicht optimierten (langsamen) und des optimierten Codes wechseln.

So füllen Sie die Demo-Webseite mit einer idealen Anzahl von Symbolen:

1. Wechseln Sie zur Demo-Webseite "Träge Animation".

   Die Optionsschaltfläche Langsam ist zunächst standardmäßig aktiviert, sodass der nicht optimierte Code verwendet wird.

2. Klicken Sie mehrmals auf die Schaltfläche "Elemente hinzufügen ", bis sich die blauen Symbole sehr langsam und unregelmäßig bewegen.

3. Wählen Sie das Optionsfeld "Optimiert" aus.

   Die Symbole werden schneller und reibungsloser verschoben.

4. Wenn Sie keinen merklichen Unterschied zwischen der Verwendung von nicht optimiertem (langsamer) und optimiertem Code feststellen, klicken Sie auf die Schaltfläche Elemente entfernen.

   Wenn zu viele Symbole vorhanden sind, wird die CPU ausgereizt, und Sie sehen keinen großen Unterschied in den Ergebnissen für die beiden Versionen des Codes.

Schritt 4: Aufzeichnen der Leistung des nicht optimierten Codes

Wenn Sie die optimierte Version des Webseitencodes ausführen, werden die blauen Symbole schneller verschoben. Weshalb? Beide Versionen des Codes sollen die Symbole in der gleichen Zeit um den gleichen Platz verschieben.

Erstellen Sie eine Aufzeichnung im Tool "Leistung ", um zu erfahren, wie Sie den Leistungsengpass in der nicht optimierten (langsamen) Version des Codes erkennen:

1. Wählen Sie auf der Demo-Webseite die Optionsschaltfläche "Langsam " aus.

   Die Symbole bewegen sich langsamer und unberechenbarer. Der nicht optimierte Code wird ausgeführt und erstellt ein Profil, und es gibt eine ideale Anzahl von Symbolen, um die schlechte Leistung zu demonstrieren und den Leistungsengpass zu finden.

2. Klicken Sie im Fenster "DevTools" im Tool "Leistung" auf die Schaltfläche "Aufzeichnen

   DevTools erfasst Leistungsmetriken, während die Webseite ausgeführt wird:

   

   Die CPU ist weiterhin gedrosselt. (Diese Screenshots sollten das Drosselungswarnungssymbol () auf der Registerkarte des Leistungstools in der Aktivitätsleiste zeigen.)

3. Warten Sie einige Sekunden und klicken Sie dann auf das Symbol Stopp () oder auf die Schaltfläche Stopp .

   DevTools beendet die Aufzeichnung, verarbeitet die Daten und zeigt dann die Ergebnisse im Leistungstool an:

   

Diese Leistungsergebnisse zeigen eine überwältigende Menge an Daten, aber alles wird in Kürze mehr Sinn ergeben.

Schritt 5: Analysieren Sie die Leistung des nicht optimierten Codes

Sobald Sie über eine Aufzeichnung der Leistung der Webseite verfügen, können Sie die Leistung der Webseite bewerten und die Ursache für Leistungsprobleme finden.

1. Untersuchen Sie oben im Tool "Leistung " das CPU-Diagramm :

   

   Die Farben im CPU-Diagramm entsprechen den Farben im Bereich "Zusammenfassung " unten im Tool "Leistung ". Das CPU-Diagramm zeigt, dass diese Bereiche einen großen Bereich ausmachen, was bedeutet, dass die CPU während der Aufzeichnung ausgelastet war. Wenn die CPU über längere Zeiträume ausgelastet ist, ist dies ein Indikator dafür, dass die Webseite nicht gut funktioniert.

2. Zeigen Sie auf das CPU- oder NET-Diagramm:

   

   DevTools zeigt einen Screenshot der Webseite zu diesem Zeitpunkt.

3. Bewegen Sie Ihre Maus nach links und rechts, um die Aufzeichnung erneut abzuspielen.

   Diese Aktion wird "Scrubbing" genannt und ist nützlich, um den Verlauf der Performance-Aufzeichnung manuell zu analysieren.

Schritt 6: Anzeigen der Überlagerung "Frame-Rendering-Statistiken"

Ein weiteres praktisches Tool ist das Frame Rendering Stats-Overlay , manchmal auch FPS-Meter genannt. Die Framerenderingstatistik-Überlagerung bietet Echtzeitschätzungen für Frames pro Sekunde (FPS), während die Webseite ausgeführt wird. Die Überlagerung " Frame-Rendering-Statistiken " ist für dieses Tutorial nicht erforderlich, kann aber hilfreiche Erkenntnisse liefern.

1. Klicken Sie oben rechts in DevTools auf die Schaltfläche DevTools anpassen und steuern (), und wählen Sie dann Schnellansichtsbereich umschalten.

   Oder drücken Sie ein- oder zweimal ESC .

   Der Bereich "Schnellansicht " wird am unteren Rand der DevTools angezeigt.

2. Klicken Sie auf der Symbolleiste "Schnellansicht " auf die Schaltfläche "Weitere Tools " ("), und wählen Sie "Rendern" aus.

   Das Rendering-Tool wird im Schnellansichtsfenster geöffnet.

3. Aktivieren Sie im Rendering-Tool das Kontrollkästchen Frame-Rendering-Statistiken :

   

4. Wechseln Sie zur Demo-Webseite.

   Die Überlagerung "Frame-Rendering-Statistiken" wird angezeigt:

   

   Die Überlagerung umfasst die folgenden Abschnitte:

   • Bildrate
   • GPU-Raster
   • GPU-Speicher

   Deaktivieren Sie die Überlagerung:

5. Wechseln Sie zum DevTools-Fenster.

6. Deaktivieren Sie im Rendering-Tool das Kontrollkästchen Frame-Rendering-Statistiken .

7. Klicken Sie oben rechts in DevTools auf die Schaltfläche DevTools anpassen und steuern (), und wählen Sie dann Schnellansichtsbereich umschalten.

   Oder drücken Sie ESC.

   Der Schnellansichtsbereich ist ausgeblendet.

Siehe auch:

• Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder für Personen mit Sehstörungen aussieht

Schritt 7: Ermitteln des Leistungsengpasses

Nachdem Sie überprüft haben, dass die Animation nicht gut funktioniert, besteht der nächste Schritt darin, die Frage "Warum?" zu beantworten.

1. Wählen Sie unten im Tool "Leistung " die Registerkarte "Zusammenfassung " aus:

   

   Wenn keine Ereignisse ausgewählt sind, wird auf der Registerkarte "Zusammenfassung " eine Aufschlüsselung der Aktivitäten angezeigt. Die meiste Zeit wurde auf die Webseite gerendert. Da Leistung die Kunst ist, weniger Arbeit zu leisten, besteht dein Ziel darin, die Zeit für Rendering-Arbeiten zu reduzieren.

2. Klicken Sie im Tool "Leistung " auf die Zeile "Hauptzeile ", um sie zu erweitern.

   DevTools zeigt im Laufe der Zeit ein Flammendiagramm der Aktivitäten im Hauptthread an:

   

   • Die x-Achse stellt die Aufzeichnung im Zeitverlauf dar. Jeder Balken stellt ein Ereignis dar. Ein breiterer Balken bedeutet, dass die Veranstaltung länger dauerte.

   • Die y-Achse stellt den Aufrufstapel dar. Wenn Ereignisse übereinander gestapelt werden, bedeutet dies, dass die übergeordneten Ereignisse die unteren Ereignisse verursacht haben.

   Die Aufzeichnung enthält eine Menge Daten.

3. Klicken und ziehen Sie im Übersichtsbereich unterhalb der Symbolleiste horizontal, um einen Teil der Aufzeichnung zu vergrößern:

   

   Der Übersichtsbereich enthält die CPU- und NET-Diagramme (rechts dargestellt).

   Im Hauptabschnitt (unter der Übersicht) und der Registerkarte Zusammenfassung werden nur Informationen für den ausgewählten Teil der Aufzeichnung angezeigt.

   Eine andere Möglichkeit, den ausgewählten Bereich zu ändern, besteht darin, den Fokus auf den Hauptbereich zu setzen, auf den Hintergrund oder ein Ereignis zu klicken und dann zu drücken:

   • W zum Vergrößern oder S Verkleinern.
   • A , um die Auswahl nach links oder D nach rechts zu verschieben.

4. Klicken Sie auf ein Ereignis für ausgelösten Animationsframe .

   Wenn oben rechts bei einem Ereignis ein rotes Dreieck angezeigt wird, ist dies eine Warnung, dass möglicherweise ein Problem im Zusammenhang mit dem Ereignis vorliegt. Das Ereignis "Animation Frame fired" tritt auf, wenn ein requestAnimationFrame()-Rückruf ausgeführt wird.

   Im Zusammenfassungsfenster werden Informationen zu diesem Ereignis angezeigt:

   

5. Klicken Sie auf den Link "Einblenden ".

   DevTools hebt das Ereignis hervor, das das Ereignis "Animation Frame fired" ausgelöst hat .

6. Klicken Sie auf den Link app.js:125 .

   Die entsprechende Quellcodezeile wird im Tool Quellen angezeigt.

7. Vergrößern Sie das vom Animationsframe ausgelöste Ereignis und seine untergeordneten Ereignisse mithilfe des Mausrads oder Trackpads.

   Oder drücken Sie W.

   Sie können jetzt die Ereignisse sehen, die auftreten, wenn ein einzelnes Bild der Animation gerendert wird. Die update-Funktion wird aufgerufen, die wiederum die updateSlow-Funktion aufruft, die viele Ereignisse zum Neuberechnen von Formatvorlagen und Layouts auslöst:

   

8. Klicken Sie auf eines der lila Layout-Ereignisse .

   DevTools stellt im Zusammenfassungsbereich weitere Informationen zum Ereignis bereit. Es gibt eine Warnung vor "erzwungenen Umbruch" (Neulayout).

9. Klicken Sie im Bereich "Zusammenfassung " auf den Link app.js:104 unter "Layout erzwungen".

   DevTools bringt Sie zu der Codezeile, die das Layout im Tool "Quellen" erzwungen hat:

   

Das Problem mit dem nicht optimierten Code besteht darin, dass er in jedem Animationsframe die Formatvorlage für jedes Symbol ändert und dann die Position jedes Symbols auf der Webseite abfragt. Da sich die Formatvorlagen geändert haben, weiß der Browser nicht, ob sich jede Symbolposition geändert hat. Daher muss er das Layout des Symbols neu gestalten, um die neue Position zu berechnen.

Siehe auch:

• Vermeiden von erzwungenen synchronen Layouts in Vermeiden Sie große, komplexe Layouts und Layout-Thrashing bei web.dev.

Schritt 8: Aufzeichnen der Leistung des optimierten Codes

Sie haben die Leistung des nicht optimierten Codes oben aufgezeichnet.

Zeichnen Sie die optimierte Codeleistung wie folgt auf:

1. Klicken Sie auf der Demowebseite auf "Optimiert ", um den optimierten Code zu aktivieren.

2. Klicken Sie im Fenster "DevTools" im Tool "Leistung" auf die Schaltfläche "Aufzeichnen

   DevTools erfasst Leistungsmetriken, während die Webseite ausgeführt wird.

3. Warten Sie einige Sekunden und klicken Sie dann auf das Stopp-Symbol () oder die Schaltfläche Stopp .

   DevTools beendet die Aufzeichnung, verarbeitet die Daten und zeigt dann die Ergebnisse im Leistungstool an.

Schritt 9: Analysieren der Leistung des optimierten Codes

• Analysieren Sie die Ergebnisse mit den Workflows und Tools, die Sie gerade kennengelernt haben, wie in Schritt 5: Analysieren Sie die Leistung des nicht optimierten Codes weiter oben.

  Von der verbesserten Framerate bis hin zur Reduzierung der Ereignisse im Flammendiagramm im Hauptbereich macht die optimierte Version der App viel weniger Arbeit, was zu einer besseren Leistung führt.

Schritt 10: Analysieren des nicht optimierten Codes

Vergleichen Sie diesen JavaScript-Codeausschnitt aus der nicht optimierten Version der App:

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

Der obige Codeausschnitt wird für jedes Frame der Browser-Renderschleife für jedes blaue Symbol auf der Webseite ausgeführt. Die element Variable verweist auf ein einzelnes blaues Symbol.

In dieser nicht optimierten Version erstellen wir eine nextPos Variable, die auf die aktuelle Position des Symbols festgelegt ist, zu der wir einen gewissen Abstand hinzufügen. Die aktuelle Position des Symbols wird mit gelesen element.offsetTop.

Nachdem wir sichergestellt haben, dass sich das Symbol noch innerhalb der Grenzen der Webseite befindet, legen wir seine neue Position mithilfe von element.style.topfest, wodurch Inline-Stile für das Element festgelegt werden.

Schließlich lesen element.offsetTop wir erneut, um die Richtung des Symbols anzupassen.

Schritt 11: Analysieren des optimierten Codes

Der optimierte Code verwendet eine andere Abfolge von Aktionen, um weniger Arbeit zu leisten. Hier ist derselbe JavaScript-Codeausschnitt aus der optimierten Version der App:

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

In der optimierten Version setzen wir den Wert der nextPos Variablen zunächst durch Lesen, element.style.transform anstatt element.offsetTop. Die Verwendung des Inline-Stils des Elements ist schneller, da das Lese-Modul element.offsetTop dazu zwingt, zu wissen, wo sich alle Elemente auf der Webseite befinden, was erfordert, dass das Modul die Formatvorlagen und das Layout neu berechnet.

Wir passen dann die Richtung des Symbols an, aber dieses Mal lesen element.offsetTop wir nicht mehr wie in der nicht optimierten Version.

Schließlich legen wir die neue Position des Symbols fest, aber dieses Mal verwenden element.style.transform wir anstelle von element.style.top. Die Verwendung element.style.transform ist schneller, da die CSS-Eigenschaft transform vom Browser-Renderingmodul angewendet werden kann, ohne das Layout der Webseite neu berechnen zu müssen. Bei Verwendung der transform Eigenschaft betrachtet der Browser jedes Symbol als einzelne Ebene und zeigt diese Ebenen dann an den richtigen Positionen an, indem das endgültige Bild neu zusammengesetzt wird.

Siehe auch:

• Vermeiden Sie Eigenschaften, die Layout oder Paint auslösen in How to create high-performance CSS animations at web.dev.
• Übergangsdeckkraft in Deckkraft bei MDN.

Schritt 12: Zurücksetzen der DevTools-Einstellungen

1. Wechseln Sie zum nicht angedockten DevTools-Fenster.

2. Klicken Sie im Leistungstool auf die Schaltfläche Mitschreiben Einstellungen ().

   DevTools zeigt Einstellungen, Dropdownmenüs und Kontrollkästchen im Zusammenhang mit der Erfassung von Leistungsmetriken an.

3. Wählen Sie im Dropdownmenü "CPU-Drosselung " oben links die Option "Keine Drosselung" aus.

   DevTools beendet die CPU-Drosselung. Das Warnsymbol wird von der Registerkarte des Leistungstools entfernt.

4. Klicken Sie oben rechts in DevTools auf die Schaltfläche DevTools anpassen und steuern () und dann neben Dockposition auf die Schaltfläche Rechts andocken ().

Nächste Schritte

Um sich mit dem Leistungstool vertraut zu machen, üben Sie, ein Profil Ihrer Webseiten zu erstellen und die Ergebnisse zu analysieren.

Wenn Sie Fragen zu Ihren Ergebnissen haben, wählen Sie in der Aktivitätsleiste"Hilfe" () "Feedback" > aus. Oder drücken Sie Alt+Umschalt+I (Windows, Linux) oder WAHL+UMSCHALT+I (macOS).

Oder melden Sie ein Problem im MicrosoftEdge / DevTools-Repository.

Fügen Sie in Ihrem Feedback, wenn möglich, Screenshots oder Links zu reproduzierbaren Webseiten ein.

Es gibt viele Möglichkeiten, die Laufzeitleistung zu verbessern. Dieser Artikel konzentrierte sich auf einen bestimmten Animationsengpass, um Ihnen eine fokussierte Tour durch das Leistungstool zu geben. Dies ist jedoch nur einer von vielen Engpässen, auf die Sie stoßen können.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.