Mit progressiven Web-Apps können Entwickler eine neue Art von Anwendungen erstellen, die eine zuverlässige und leistungsstarke Nutzererfahrung bieten. Damit Entwickler jedoch sicher sein können, dass eine Webanwendung die gewünschten Leistungsziele erreicht, benötigen sie Zugriff auf hochauflösende Leistungsmessdaten. Die W3C-Spezifikation für die Leistungszeitachse definiert eine solche Schnittstelle für Browser, um programmatischen Zugriff auf Timing-Daten auf niedriger Ebene zu ermöglichen. Das eröffnet einige interessante Anwendungsfälle:
- Offline- und benutzerdefinierte Leistungsanalyse
- Drittanbietertools zur Leistungsanalyse und -visualisierung
- Leistungsbewertung in IDEs und anderen Entwicklertools
In den meisten gängigen Browsern ist bereits Zugriff auf diese Art von Zeitdaten für Navigationszeiten, Ressourcenzeiten und Nutzerzeiten verfügbar. Die neueste Ergänzung ist die Performance Observer-Schnittstelle. Dabei handelt es sich im Grunde um eine Streaming-Schnittstelle, mit der Timing-Informationen auf niedriger Ebene asynchron erfasst werden, sobald sie vom Browser erfasst werden. Diese neue Benutzeroberfläche bietet gegenüber früheren Methoden zum Aufrufen der Zeitachse eine Reihe wichtiger Vorteile:
- Derzeit müssen Apps die gespeicherten Messungen regelmäßig abfragen und vergleichen, was sehr aufwendig ist. Diese Benutzeroberfläche bietet einen Rückruf. Mit anderen Worten: Es ist keine Abfrage erforderlich. Dadurch können Apps, die diese API verwenden, reaktionsschneller und effizienter sein.
- Es unterliegt keinen Pufferlimits (die meisten Puffer sind standardmäßig auf 150 Elemente festgelegt) und verhindert Race-Bedingungen zwischen verschiedenen Verbrauchern, die den Puffer möglicherweise ändern möchten.
- Benachrichtigungen des Leistungsüberwachers werden asynchron gesendet und der Browser kann sie während der Inaktivität senden, um zu vermeiden, dass sie mit kritischen Rendering-Aufgaben konkurrieren.
Ab Chrome 52 ist die Benutzeroberfläche für Leistungsüberwacher standardmäßig aktiviert. Sehen wir uns an, wie Sie sie verwenden.
<html>
<head>
<script>
var observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
if (console) {
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
}
})
});
observer.observe({entryTypes: ['resource', 'mark', 'measure']});
performance.mark('registered-observer');
function clicked(elem) {
performance.measure('button clicked');
}
</script>
</head>
<body>
<button onclick="clicked(this)">Measure</button>
</body>
</html>
Diese einfache Seite beginnt mit einem Script-Tag, in dem JavaScript-Code definiert wird:
- Wir instanziieren ein neues
PerformanceObserver-Objekt und übergeben dem Objektkonstruktor eine Event-Handler-Funktion. Der Konstruktor initialisiert das Objekt so, dass unser Handler jedes Mal aufgerufen wird, wenn ein neuer Satz von Messdaten zur Verarbeitung bereit ist. Die Messdaten werden als Liste von Objekten übergeben. Der Handler wird hier als anonyme Funktion definiert, die die formatierten Messdaten einfach in der Konsole anzeigt. In der Praxis werden diese Daten möglicherweise zur späteren Analyse in der Cloud gespeichert oder an ein interaktives Visualisierungstool weitergeleitet. - Wir registrieren uns über die Methode
observe()für die Arten von Zeitmessereignissen, die wir interessieren, und rufen die Methodemark()auf, um den Moment zu markieren, zu dem wir uns registriert haben. Dieser Moment gilt als Beginn unserer Zeitintervalle. - Wir definieren einen Klick-Handler für eine Schaltfläche, die im Inhalt der Seite definiert ist. Dieser Klick-Handler ruft die Methode
measure()auf, um Zeitdaten zum Zeitpunkt des Klicks auf die Schaltfläche zu erfassen.
Im Inhalt der Seite definieren wir eine Schaltfläche, weisen unserem Klick-Handler das Ereignis onclick zu und sind bereit.
Wenn wir jetzt die Seite laden und das Steuerfeld für die Chrome-Entwicklertools öffnen, um die JavaScript-Konsole aufzurufen, wird jedes Mal, wenn wir auf die Schaltfläche klicken, eine Leistungsmessung durchgeführt. Da wir uns für die Beobachtung solcher Messungen registriert haben, werden sie asynchron an unseren Ereignis-Handler weitergeleitet, ohne dass der Zeitplan abgefragt werden muss. Die Messungen werden dann in der Konsole angezeigt, sobald sie auftreten:
Der Wert start steht für den Startzeitstempel für Ereignisse vom Typ mark (von denen diese App nur eines hat). Ereignisse vom Typ measure haben keinen festgelegten Beginn. Sie stellen Zeitmessungen dar, die relativ zum letzten mark-Ereignis erfasst wurden. Die hier angezeigten Dauerwerte repräsentieren also die verstrichene Zeit zwischen dem Aufruf von mark(), der als gemeinsamer Startpunkt des Intervalls dient, und mehreren nachfolgenden Aufrufen von measure().
Wie Sie sehen, ist diese API recht einfach und bietet die Möglichkeit, gefilterte, hochauflösende Echtzeit-Leistungsdaten ohne Polling zu erheben. Dies sollte die Tür zu effizienteren Leistungstools für Webanwendungen öffnen.