Google Chrome Dev Tools: Zeitleistenfenster

Ähnlich wie im Netzwerkfenster bietet das Zeitleistenfenster der Google Chrome Developer Tools einen Überblick über die Zeit, die zum Laden eines Webseiten-Dokuments oder einer Anwendung benötigt wird.

Falls Sie sie verpasst haben, enthalten frühere Einträge in der Reihe der Google Chrome Developer Tools:

  • Google Chrome-Entwicklertools: Elementfenster
  • Google Chrome-Entwicklertools: Ressourcenfenster
  • Google Chrome Developer Tools: Konsolenbedienfeld
  • Google Chrome-Entwicklertools: Netzwerkfenster
  • Google Chrome Developer Tools: Skriptbedienfeld

In dieser Demonstration werde ich The Weather Channel (TWC) verwenden, um das Online-Tool zu veranschaulichen. Natürlich können Sie jede gewünschte Website verwenden, um selbst zu experimentieren.

Die Entwickler von Google haben daran gearbeitet, die Skalierbarkeit und Rückverfolgbarkeit zu verbessern und gleichzeitig mehr Details zu aufgezeichneten Ereignissen bereitzustellen, die im Zeitleistenfenster angezeigt werden.

Geben Sie in Google Chrome die URL http://www.weather.com/ in die Adressleiste ein oder suchen Sie nach "The Weather Channel". Klicken Sie nach dem Öffnen der Seite mit der rechten Maustaste und wählen Sie dann Element untersuchen (siehe Abbildung A unten).

Wenn das Tmeline-Bedienfeld noch nicht ausgewählt ist, klicken Sie auf Timeline. Es ist in Abbildung B dargestellt .

Als Nächstes möchten Sie mit dem Aufzeichnen einer Sitzung beginnen, indem Sie auf die Schaltfläche Aufzeichnen klicken und dann die Seite aktualisieren (F5). Sobald Sie darauf geklickt haben, wird die Aufnahmetaste während der Aufnahme von grau zu rot geändert, und die Zeitleiste beginnt mit der Erfassung der Zeitleisten für das Laden, Skripten und Rendern für die Webseite.

Abbildung C.

Nach einigen Sekunden der Aufnahme können Sie erneut auf die Aufnahmetaste klicken, um die Timeline-Aufnahmesitzung zu beenden. Der Kreis wird wieder grau. Ich habe die Aufnahmesitzung in dieser Demonstration etwa 12 Sekunden lang laufen lassen.

In der Ansicht der obersten Ebene werden die Ereignisse angezeigt, die aufgezeichnet wurden und in drei Kategorien unterteilt sind. Die Zeitleiste für das Laden wird mit einer blauen Linie dargestellt, Scripting ist eine gelbe Linie und Rendering ist eine violette Linie. In der Kategorie Laden werden alle netzwerkbezogenen Ereignisse aufgezeichnet. Die Kategorie "Skripten" umfasst die Ausführung von JavaScript bei verschiedenen Ereignissen. Beim Rendern werden das CSS-Rendering und die Aktivitäten im Zusammenhang mit dem Malen beim Laden berechnet. Der obere Bereich enthält auch ein veränderbares Schiebefenster.

Der mittlere Bereich listet eine Reihe von Datensätzen auf. Diese Datensätze haben links Titel und rechts Zeitleistenleisten. Wenn Sie den Mauszeiger über einen Datensatz bewegen oder auf ein Ereignis klicken, werden Details zu den Ereignissen angezeigt, wie im Datensatz "Anforderung senden" in Abbildung D dargestellt . Erweiterbare Fächer im Diagramm visualisieren verschachtelte Datensätze, wie im Layoutdatensatz in Abbildung E unten gezeigt.

Abbildung D.

Abbildung E.

All dies hilft Ihnen zu sehen, welche Aktivitäten im Browser stattfinden, und insbesondere im Zeitleistenfenster können Sie bestimmen, welche Aktivitäten dazu führen, dass Ihr Browser härter arbeitet als andere.

Eine andere Möglichkeit, ein Skriptereignis weiter zu untersuchen, besteht darin, im rechten Bereich auf einen gelben Datensatz zu klicken. In diesem Fall habe ich ein Evaluierungsskript ausgewählt (siehe Abbildung F ) und dann auf den Ressourcenlink geklickt, der mich zum Bedienfeld „Skripte“ führte, in dem ich die Skriptdatei anzeigen konnte, die das Ereignis aufgerufen hat (siehe Abbildung G) .

Abbildung F.

Abbildung G.

Klicken Sie auf einen blauen Datensatz, um ein Netzwerkereignis anzuzeigen. In diesem Fall habe ich eine Sendeanforderung ausgewählt (siehe Abbildung H) . Dann habe ich auf den Ressourcenlink geklickt und es wurde das Bild angezeigt, wie es im rechten Seitenbereich in Abbildung I gerendert wurde.

Abbildung H.

Abbildung I.

Das Timeline-Bedienfeld gibt Ihnen einen Überblick darüber, wie der Browser Webseiten rendert, und zeigt an, welche Prozesse und Ressourcen sowohl für das Rendern als auch für das Laden von JavaScript mehr Rechenleistung erfordern. Mit diesem Tool können Sie visualisieren, wo Sie Ihre Webanwendungen optimieren und besser optimieren müssen.

© Copyright 2021 | mobilegn.com