Analysieren der Laufzeitleistung (Tutorial)

Die Laufzeitleistung ist die Leistung Ihrer Webseite, wenn sie ausgeführt wird, im Gegensatz zum Laden. Im folgenden Tutorial erfahren Sie, wie Sie das DevTools Performance-Tool 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 wichtige Indikatoren für Core Web Vitals sind. Jedes der Core Web Vitals stellt ein unterschiedliches Facet der Benutzererfahrung dar, ist in diesem Bereich messbar und spiegelt die reale Erfahrung eines kritischen benutzerorientierten Ergebnisses wider. Sie können diese Core Web Vitals im Leistungstool anzeigen.

Siehe auch:

• Web Vitals web.dev.
• Terminologie im Leistungstool: 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 Demo-Webseite "Tluggish Animation" und verwenden das Leistungstool , um einen Leistungsengpass auf der Webseite zu ermitteln.

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

   Sie erstellen ein Profil auf dieser Demowebseite, auf der eine variable Anzahl von Symbolen angezeigt wird, die sich nach oben und unten bewegen. Wenn Sie den Quellcode für die Demo anzeigen möchten, lesen Sie MicrosoftEdge/Demos > devtools-performance-get-started.

   Der InPrivate-Modus stellt sicher, dass der Browser in einem sauber Zustand ausgeführt wird. Wenn Sie beispielsweise viele Erweiterungen installiert haben, können diese Erweiterungen bei Ihren Leistungsmessungen zu Rauschen führen. Weitere Informationen finden Sie unter Durchsuchen von InPrivate 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 in der oberen rechten Ecke von DevTools auf die Schaltfläche DevTools anpassen und steuern (), und klicken Sie dann neben Dockspeicherort auf die Schaltfläche In separates Fenster ausocken (").

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 Profil für eine Webseite 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 zu simulieren, wie folgt:

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

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

   DevTools zeigt Dropdownmenüs für Einstellungen 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. vierfache Verlangsamung – empfohlen:

   

   Oder wählen Sie im Abschnitt Umgebungseinstellungen unten rechts im Dropdownmenü CPU-Drosselung den empfohlenen Verlangsamungswert 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 auf mobilen Geräten mit niedrigeren End-Geräten gut funktioniert, wählen Sie in der Dropdownliste für die CPU-Drosselung eine größere Verlangsamung aus, z. B. die 6-fache Verlangsamung.

   DevTools drosselt Ihre CPU, sodass sie langsamer als üblich ist.

   Ein Drosselungswarnungssymbol () wird auf der Registerkarte Leistungstool angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

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

   Die Dropdownmenüs für Einstellungen und Kontrollkästchen im Zusammenhang mit der Erfassung von Leistungsmetriken sind ausgeblendet.

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

Bevor Sie die Leistung aufzeichnen, füllen Sie die Demo-Webseite mit einer idealen Anzahl von Symbolen, um den nicht optimierten und optimierten Code zu vergleichen.

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

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

1. Wechseln Sie zur Demo-Webseite für Tluggish Animation.

   Die Optionsschaltfläche "Langsam " ist standardmäßig ausgewählt, 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 unveränderlich bewegen.

3. Wählen Sie die Optionsschaltfläche Optimiert aus.

   Die Symbole werden schneller und reibungsloser verschoben.

4. Wenn sie keinen merklichen Unterschied zwischen der Verwendung des nicht optimierten (langsamen) und optimierten Codes feststellen, versuchen Sie, auf die Schaltfläche Elemente entfernen zu klicken.

   Wenn zu viele Symbole vorhanden sind, wird die CPU ausgelastet, und sie sehen keinen großen Unterschied in den Ergebnissen für die beiden Codeversionen.

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 denselben Speicherplatz verschieben.

Erstellen Sie eine Aufzeichnung im Leistungstool , 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 werden langsamer und irrgesteuerter. Der nicht optimierte Code wird ausgeführt und es wird ein Profil erstellt, und es gibt eine ideale Anzahl von Symbolen, um eine schlechte Leistung zu veranschaulichen und den Leistungsengpass zu finden.

2. Klicken Sie im Fenster DevTools im Leistungstool auf die Schaltfläche Aufzeichnen ().

   DevTools erfasst Leistungsmetriken während der Ausführung der Webseite:

   

   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 Beenden () oder auf die Schaltfläche Beenden .

   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 es wird in Kürze alle sinnvoller sein.

Schritt 5: Analysieren der Leistung des nicht optimierten Codes

Sobald Sie die Leistung der Webseite aufgezeichnet haben, können Sie die Leistung der Webseite bewerten und die Ursache für Leistungsprobleme ermitteln.

1. Untersuchen Sie oben im Leistungstool das CPU-Diagramm :

   

   Die Farben im CPU-Diagramm entsprechen den Farben im Bereich Zusammenfassung am unteren Rand des Leistungstools . Das CPU-Diagramm zeigt, dass diese Regionen einen großen Bereich bilden, was bedeutet, dass die CPU während der Aufzeichnung maximal ausgereizt wurde. Wenn die CPU-Auslastung über einen längeren Zeitraum ausgereizt ist, ist dies ein Hinweis darauf, 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 die Maus nach links und rechts, um die Aufzeichnung wiederzugeben.

   Diese Aktion wird als Scrubbing bezeichnet und ist nützlich, um den Fortschritt der Leistungsaufzeichnung manuell zu analysieren.

Schritt 6: Anzeigen der Überlagerung "Frame Rendering Stats"

Ein weiteres praktisches Tool ist die Frame Rendering Stats-Überlagerung , die manchmal auch als FPS-Verbrauchseinheit bezeichnet wird. Die Überlagerung frame rendering stats (Frame Rendering Stats ) bietet Echtzeitschätzungen für Frames pro Sekunde (FPS), während die Webseite ausgeführt wird. Die Überlagerung "Frame Rendering Stats" ist für dieses Tutorial nicht erforderlich, kann aber hilfreiche Einblicke liefern.

1. Klicken Sie in der oberen rechten Ecke von DevTools auf die Schaltfläche DevTools anpassen und steuern (), und wählen Sie dann Den Bereich Schnellansicht umschalten aus.

   Oder drücken Sie ESC ein- oder zweimal.

   Der Bereich Schnellansicht wird unten in DevTools angezeigt.

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

   Das Renderingtool wird im Bereich Schnellansicht geöffnet.

3. Aktivieren Sie im Renderingtool das Kontrollkästchen Frame Rendering Stats ( Frame Rendering Stats ):

   

4. Wechseln Sie zur Demo-Webseite.

   Die Überlagerung "Frame Rendering Stats" wird angezeigt:

   

   Die Überlagerung enthält die folgenden Abschnitte:

   • Bildrate
   • GPU-Raster
   • GPU-Arbeitsspeicher

   Deaktivieren Sie die Überlagerung:

5. Wechseln Sie zum Fenster DevTools.

6. Deaktivieren Sie im Renderingtool das Kontrollkästchen Frame Rendering Stats ( Frame Rendering Stats ).

7. Klicken Sie in der oberen rechten Ecke von DevTools auf die Schaltfläche DevTools anpassen und steuern (), und wählen Sie dann Den Bereich Schnellansicht umschalten aus.

   Oder drücken Sie ESC.

   Der Bereich "Schnellansicht " 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 sich vergewissert haben, dass die Animation nicht gut funktioniert, besteht der nächste Schritt darin, die Frage "Warum?" zu beantworten.

1. Wählen Sie unten im Leistungstool die Registerkarte Zusammenfassung aus:

   

   Wenn keine Ereignisse ausgewählt sind, wird auf der Registerkarte Zusammenfassung eine Aufschlüsselung der Aktivität angezeigt. Die Webseite verbrachte die meiste Zeit mit dem Rendern. Da Leistung die Kunst ist, weniger Arbeit zu erledigen, besteht Ihr Ziel darin, die Zeit zu reduzieren, die für die Renderingarbeit aufgewendet wird.

2. Klicken Sie im Leistungstoolauf die Hauptzeile, um sie zu erweitern.

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

   

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

   • Die y-Achse stellt die Aufrufliste dar. Wenn Ereignisse übereinander gestapelt werden, bedeutet dies, dass die oberen Ereignisse die niedrigeren Ereignisse verursacht haben.

   Die Aufzeichnung enthält viele Daten.

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

   

   Der Bereich Übersicht enthält die CPU- und NET-Diagramme (auf der rechten Seite angegeben).

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

   Eine andere Möglichkeit zum Ändern des ausgewählten Bereichs besteht darin, den Fokus auf den Hauptabschnitt zu setzen, auf den Hintergrund oder ein Ereignis zu klicken und dann Folgendes zu drücken:

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

4. Klicken Sie auf ein Ereignis, das durch einen Animationsrahmen ausgelöst wurde .

   Wenn oben rechts ein rotes Dreieck angezeigt wird, handelt es sich um 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 Bereich Zusammenfassung werden Informationen zu diesem Ereignis angezeigt:

   

5. Klicken Sie auf den Link Anzeigen .

   DevTools hebt das Ereignis hervor, das das Ereignis "Animation Frame Fired" initiiert hat .

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

   Die relevante Zeile des Quellcodes wird im Tool Quellen angezeigt.

7. Vergrößern Sie das Ereignis "Animationsrahmen ausgelöst " und die zugehörigen untergeordneten Ereignisse mithilfe des Mausrads oder Trackpads.

   Oder drücken Sie W.

   Sie können nun die Ereignisse sehen, die auftreten, wenn ein einzelner Frame der Animation gerendert wird. Die Update-Funktion wird aufgerufen, die wiederum die updateSlow-Funktion aufruft, die viele Recalculate Style - und Layout-Ereignisse auslöst:

   

8. Klicken Sie auf eines der violetten Layoutereignisse .

   DevTools bietet weitere Informationen zum Ereignis im Bereich Zusammenfassung . Es gibt eine Warnung zu "erzwungenen Umläufen" (Neulayout).

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

   DevTools führt Sie zu der Codezeile, die das Layout im Quellentool erzwungen hat:

   

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

Siehe auch:

• Vermeiden erzwungener synchroner Layoutsunter Vermeiden von großen, komplexen Layouts und Layouts zur web.dev.

Schritt 8: Aufzeichnen der Leistung des optimierten Codes

Sie haben oben die nicht optimierte Codeleistung aufgezeichnet.

Notieren Sie sich die optimierte Codeleistung wie folgt:

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

2. Klicken Sie im Fenster DevTools im Leistungstool 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 Symbol "Beenden " (") oder auf die Schaltfläche "Beenden ".

   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 mithilfe der Workflows und Tools, die Sie gerade gelernt haben, die Ergebnisse in der Leistung, wie in Schritt 5: Analysieren der Leistung des nicht optimierten Codes oben.

  Von der verbesserten Framerate bis hin zur Reduzierung der Ereignisse im Flammendiagramm im Hauptabschnitt führt die optimierte Version der App viel weniger Arbeit aus, 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 auf jedem Frame der Browserrenderingschleife 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 eine gewisse Entfernung hinzufügen. Die aktuelle Position des Symbols wird mithilfe element.offsetTopvon gelesen.

Nachdem wir sichergestellt haben, dass sich das Symbol noch innerhalb der Grenzen der Webseite befindet, legen wir seine neue Position mithilfe element.style.topvon fest, wodurch Inlineformatvorlagen 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 Sequenz von Aktionen, um weniger Arbeit zu erledigen. Hier sehen Sie den gleichen Codeausschnitt von JavaScript 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 legen wir zuerst den Wert der nextPos Variablen durch Lesen element.style.transform statt durch Verwenden element.offsetTopvon fest. Die Verwendung des Inlinestils des Elements ist schneller, da das Lesen element.offsetTop die Browser-Engine dazu zwingt, zu wissen, wo sich alle Elemente auf der Webseite befinden. Daher muss die Engine die Stile und das Layout neu berechnen.

Wir passen dann die Richtung des Symbols an, aber dieses Mal lesen element.offsetTop wir nicht erneut 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 von element.style.transform ist schneller, da die CSS-Eigenschaft transform von der Browserrendering-Engine 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 angeordnet wird.

Siehe auch:

• Vermeiden von Eigenschaften, die Layout oder Zeichnen auslösen in Erstellen leistungsstarker CSS-Animationen bei web.dev.
• Übergang der Deckkraft in der Durchlässigkeit bei MDN.

Schritt 12: Zurücksetzen der DevTools-Einstellungen

1. Wechseln Sie zum Fenster "Nicht angedockte DevTools".

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

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

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

   DevTools beendet die Drosselung der CPU. Das Warnsymbol wird von der Registerkarte Leistungstool entfernt.

4. Klicken Sie in der oberen rechten Ecke von DevTools auf die Schaltfläche DevTools anpassen und steuern (), und klicken Sie dann neben Dockspeicherort auf die Schaltfläche Nach rechts).

Nächste Schritte

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

Wenn Sie Fragen zu Ihren Ergebnissen haben, wählen Sie in der AktivitätsleisteHilfe () >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 Ihr Feedback Nach Möglichkeit Screenshots oder Links zu reproduzierbaren Webseiten ein.

Es gibt viele Möglichkeiten, die Laufzeitleistung zu verbessern. Dieser Artikel konzentriert sich auf einen bestimmten Animationsengpass, um Ihnen einen fokussierten Überblick über das Leistungstool zu bieten, aber es ist nur einer von vielen Engpässen, die auftreten können.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.