Performance Observer – Effizienter Zugriff auf Leistungsdaten

Marc Cohen

Mit progressiven Web-Apps können Entwickler eine neue Klasse von Anwendungen erstellen, die eine zuverlässige, leistungsstarke Nutzerumgebung bieten. Entwickler benötigen jedoch Zugriff auf hochauflösende Leistungsmessdaten, um sicherzustellen, dass eine Webanwendung die gewünschten Leistungsziele erreicht. In der W3C Performance Timeline-Spezifikation ist eine solche Schnittstelle für Browser definiert, um programmatischen Zugriff auf Low-Level-Timing-Daten zu ermöglichen. Dies eröffnet Ihnen einige interessante Anwendungsfälle:

  • Offline- und benutzerdefinierte Leistungsanalyse
  • Leistungsanalyse- und Visualisierungstools von Drittanbietern
  • Leistungsbewertung, integriert in IDEs und andere Entwicklertools

Der Zugriff auf diese Art von Zeitdaten ist in den meisten gängigen Browsern für Navigations-Timings, Ressourcen-Timing und Nutzertiming bereits verfügbar. Die neueste Schnittstelle ist die Performance Observer-Schnittstelle, die im Wesentlichen eine Streaming-Schnittstelle ist, um zeitnahe Informationen auf niedriger Ebene asynchron zu erfassen, während sie vom Browser erfasst werden. Diese neue Oberfläche bietet eine Reihe entscheidender Vorteile gegenüber den vorherigen Methoden für den Zugriff auf die Zeitachse:

  • Heutzutage müssen Anwendungen die gespeicherten Messwerte regelmäßig abfragen und unterscheiden, was kostspielig ist. Diese Schnittstelle bietet ihnen einen Callback. Es ist also keine Abfrage erforderlich. Anwendungen, die diese API verwenden, können daher reaktionsschneller und effizienter sein.
  • Er unterliegt keinen Pufferbeschränkungen (die meisten Puffer sind standardmäßig auf 150 Elemente eingestellt) und es werden Race-Bedingungen zwischen verschiedenen Nutzern vermieden, die den Puffer möglicherweise ändern möchten.
  • Benachrichtigungen von Leistungsbeobachtern werden asynchron gesendet und der Browser kann sie während der Inaktivität senden, um zu vermeiden, dass sie mit kritischer Rendering-Arbeit konkurriert.

Ab Chrome 52 ist die Benutzeroberfläche des Leistungsbeobachters standardmäßig aktiviert. Sehen wir uns die Funktionsweise an.

<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, das JavaScript-Code definiert:

  • Es wird ein neues PerformanceObserver-Objekt instanziiert und eine Event-Handler-Funktion an den Objektkonstruktor übergeben. Der Konstruktor initialisiert das Objekt so, dass der Handler jedes Mal aufgerufen wird, wenn ein neuer Satz von Messdaten zur Verarbeitung bereit ist. Die Messdaten werden dabei als Liste von Objekten übergeben. Der Handler ist hier als anonyme Funktion definiert, die einfach die formatierten Messdaten in der Console anzeigt. In einem realen Szenario können diese Daten zur späteren Analyse in der Cloud gespeichert oder an ein interaktives Visualisierungstool übergeben werden.
  • Wir registrieren die gewünschten Arten von Zeitereignissen über die Methode observe() und rufen die Methode mark() auf, um den Zeitpunkt der Registrierung zu markieren. Dabei wird der Beginn unserer Zeitintervalle berücksichtigt.
  • Für eine im Seitentext definierte Schaltfläche wird ein Klick-Handler definiert. Dieser Klick-Handler ruft die Methode measure() auf, um Zeitdaten darüber zu erfassen, wann auf die Schaltfläche geklickt wurde.

Im Hauptteil der Seite definieren wir eine Schaltfläche, weisen dem onclick-Ereignis unseren Klick-Handler zu und schon kann es losgehen.

Wenn wir jetzt die Seite laden und das Steuerfeld „Chrome-Entwicklertools“ öffnen, um die JavaScript-Konsole zu sehen, 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 Event-Handler weitergeleitet, ohne dass Sie die Zeitachse abfragen müssen, der die Messungen in der Konsole anzeigt, sobald sie auftreten:

Performance-Beobachter

Der Wert start stellt den Startzeitstempel für Ereignisse vom Typ mark dar (von denen diese Anwendung nur eines hat). Ereignisse vom Typ measure haben keine inhärente Startzeit. Sie stellen zeitliche Messungen dar, die relativ zum letzten mark-Ereignis vorgenommen wurden. Die hier aufgeführten Werte für die Dauer stellen also die verstrichene Zeit zwischen dem Aufruf von mark(), der als gemeinsamer Intervall-Ausgangspunkt dient, und mehreren nachfolgenden Aufrufen von measure() dar.

Wie Sie sehen, ist diese API recht einfach und bietet die Möglichkeit, gefilterte, hochauflösende Echtzeit-Leistungsdaten ohne Abfrage zu erfassen. Dies sollte die Tür zu effizienteren Performance-Tools für Webanwendungen öffnen.