201310Nov

JavaScript: Performance-Analyse mit window.performance

JavaScript steckt voller Überraschungen: Wie Stefan Judis in seinem Artikel schreibt, gibt es im globalen window-Scope ein performance-Objekt, das interessante Information zur Website-Leistung beinhaltet. Innerhalb dieses Objekts stehen wiederum die Objekte "timing", "navigation" und "memory" zur Verfügung, die Aufschluss über die verschiedenen Bereiche geben: Das "timing"-Objekt vom Typ "PerformanceTiming" beispielsweise listet etliche Zeitmessungen der Latenzen einer Website auf, so dass hieraus bestimmte Ereignisse abgeleitet werden können.

Journey of Discovery - the Global window.performance Object

Stefan Judis hat diesbezüglich ein Gist veröffentlicht, das sich gut im "Snippets"-Bereich der Chrome-Entwicklertools ablegen lässt (unter Firefox stehen noch nicht alle Funktionen des performance-Objekts bereit). Die Snippets basieren auf den Messungen des timing-Objekts und zeigen die Zeiten an, die etwa für DNS-Lookups, das "DOMContentLoaded"-Event oder das "document.load"-Event benötigt wurden.
Weiterhin lässt sich mit dem window.performance-Objekt analysieren, welche Elemente einer Seite ein Bottleneck sein könnten: Mit "window.performance.getEntries()" etwa können die Ladezeiten für einzelne Web-Ressourcen abgefragt werden, so dass daraus Optimierungen erarbeitet werden können.