Einführung in das Leistungstool

Die Laufzeitleistung ist die Leistung Ihrer Seite, 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:

• Optimieren Sie die Websitegeschwindigkeit mithilfe von Lighthouse

Erste Schritte

Im folgenden Tutorial öffnen Sie DevTools auf der Demoseite "Tluggish Animation" und verwenden das Leistungstool , um einen Leistungsengpass auf der Seite zu ermitteln.

1. Öffnen Sie die Demoseite für träge Animation in Ihrer InPrivate-Registerkarte oder ihrem Fenster. Klicken Sie dazu mit der rechten Maustaste auf den Link, und wählen Sie dann Link im InPrivate-Fenster öffnen aus. Sie profilieren diese Seite, die eine variable Anzahl von Symbolen anzeigt, die sich nach oben und unten bewegen. Weitere Informationen zu InPrivate finden Sie unter Durchsuchen von InPrivate in Microsoft Edge.

   Quellcode: MicrosoftEdge/Demos > devtools-performance-get-started.

2. Drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS), um DevTools zu öffnen:

   

Für die restlichen Screenshots wird DevTools in einem separaten Fenster abgedockt angezeigt.

Simulieren einer mobilen CPU

Mobile Geräte haben viel weniger CPU-Leistung als Desktops und Laptops. Wenn Sie ein Profil für eine Seite erstellen, verwenden Sie die CPU-Drosselung, um die Leistung Ihrer Seite auf mobilen Geräten zu simulieren.

1. Öffnen Sie in DevTools das Leistungstool .

2. Klicken Sie auf Einstellungen erfassen (). DevTools zeigt Einstellungen im Zusammenhang mit der Erfassung von Leistungsmetriken an.

3. Wählen Sie für CPUdie Option 4x Verlangsamung aus. DevTools drosselt Ihre CPU, sodass sie viermal langsamer als üblich ist.

   

   Wenn Sie sicherstellen möchten, dass Seiten auf mobilen Low-End-Geräten gut funktionieren, legen Sie die CPU auf 6-fache Verlangsamung fest.

Einrichten der Demo

Im folgenden Abschnitt können Sie die Demo anpassen, um sicherzustellen, dass Ihre Erfahrung relativ konsistent mit den Screenshots und Beschreibungen ist.

1. Klicken Sie auf die Schaltfläche Elemente hinzufügen , bis sich die blauen Symbole deutlich langsamer als zuvor bewegen. Auf einem High-End-Computer können Sie etwa 20 Mal darauf klicken.

2. Klicken Sie auf Optimiert. Die blauen Symbole sollten schneller und reibungsloser ausgeführt werden.

3. Um einen Unterschied zwischen den optimierten und nicht optimierten Versionen besser anzuzeigen, klicken Sie einige Male auf die Schaltfläche Elemente entfernen , und versuchen Sie es erneut. Wenn Sie zu viele blaue Symbole hinzufügen, können Sie die CPU maximal auslasten, und Sie können dann möglicherweise keinen großen Unterschied in den Ergebnissen für die beiden Versionen feststellen.

4. Klicken Sie auf Langsam. Die blauen Symbole bewegen sich langsamer und wieder träger.

Aufzeichnen der Laufzeitleistung

Wenn Sie die optimierte Version der Seite ausgeführt haben, werden die blauen Symbole schneller angezeigt. Weshalb? Beide Versionen 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 Version erkennen.

1. Klicken Sie in DevTools auf Datensatz (). DevTools erfasst Leistungsmetriken, während die Seite ausgeführt wird.

   

2. Warten Sie einige Sekunden.

3. Klicken Sie auf 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.

Analysieren der Ergebnisse

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

1. Das CPU-Diagramm wird am oberen Rand angezeigt. 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 Seite nicht gut funktioniert.

   

2. Zeigen Sie auf das CPU- oder NET-Diagramm. DevTools zeigt einen Screenshot der Seite zu diesem Zeitpunkt. Bewegen Sie die Maus nach links und rechts, um die Aufzeichnung wiederzugeben. Die Aktion wird als Scrubbing bezeichnet und ist nützlich, um den Fortschritt der Leistungsaufzeichnung manuell zu analysieren.

   

Bonus: Öffnen sie die Überlagerung "Frame Rendering Stats"

Ein weiteres praktisches Tool ist die Frame Rendering Stats-Überlagerung , die Echtzeitschätzungen für FPS während der Seitenausführung bereitstellt. Die Überlagerung "Frame Rendering Stats " ist für dieses Tutorial nicht erforderlich, kann aber hilfreiche Erkenntnisse liefern.

1. Drücken Sie in DevTools STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

2. Beginnen Sie mit Rendering der Eingabe im Befehlsmenü , und klicken Sie auf Rendering anzeigen.

3. Aktivieren Sie im Renderingtoolframe rendering stats (Framerenderingstatistiken). Links oben auf der Webseite wird eine neue Überlagerung angezeigt.

   

4. Wenn Sie mit der Überprüfung der FPS-Daten fertig sind, deaktivieren Sie das Kontrollkästchen Frame Rendering Stats , um die Überlagerung auszublenden.

Ermitteln des Engpasses

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

1. Wenn keine Ereignisse ausgewählt sind, wird im Bereich Zusammenfassung eine Aufschlüsselung der Aktivitäten angezeigt. Die Seite hat die meiste Zeit mit dem Rendern verbracht. 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. Erweitern Sie den Hauptabschnitt . DevTools zeigt ein Flammendiagramm der Aktivitäten im Standard Thread im Laufe der Zeit 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.

   

3. Die Aufzeichnung enthält viele Daten. Um einen Teil der Aufzeichnung zu vergrößern, klicken Sie auf den Bereich Übersicht , und ziehen Sie ihn zum oberen Rand des Leistungstools . Der Bereich Übersicht enthält die CPU- und NET-Diagramme (auf der rechten Seite angegeben). Im Hauptabschnitt und im Zusammenfassungsbereich 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 um zu vergrößern, S um zu verkleineren.
   • A , um die Auswahl nach links zu verschieben, D um 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 Seite 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.

Analysieren der optimierten Version

Klicken Sie mithilfe der soeben erlernten Workflows und Tools auf der Demo-Webseite auf Optimiert , um den optimierten Code zu aktivieren, eine weitere Leistungsaufzeichnung zu erstellen und dann die Ergebnisse zu analysieren. 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.

Nicht optimierte Version

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 Browserrenderingschleife für jedes blaue Symbol auf der Seite 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 Seite 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.

Optimierte Version

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 Seite befinden. Daher muss die Engine die Formatvorlagen 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 Seite 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.

Weitere Informationen finden Sie unter Verwenden von Transformations- und Deckkraftänderungen für Animationen.

Nächste Schritte

Um sich mit dem Leistungstool vertraut zu machen, üben Sie die Profilerstellung Ihrer Seiten 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 Seiten 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.

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 originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

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