Brechen Sie die Performance API

0
71

JavaScript-Performance-API, ist klug, weil es über die Hände-Werkzeuge zur genauen Messung der performance von Web-Seiten, die, obwohl Sie sich bereits seit lange vor, nie wirklich war, einfach oder präzise genug ist.

Das heißt, es ist nicht so einfach, um die ersten Schritte mit der API, wie es ist, es tatsächlich zu verwenden. Obwohl ich gesehen habe-Erweiterungen, es fallen hier und da in anderen Beiträgen, das große Bild, die alles miteinander verbindet, ist schwer zu finden.

Ein Blick auf jedes Dokument, das die globalen performance-Schnittstelle (der Zugang zur Leistung API) und du wirst bombardiert mit einer Reihe von anderen Spezifikationen, einschließlich High-Resolution-Time-API, Performance-Zeitleiste-API und der Navigations-API unter dem, was fühlt sich wie viele, viele andere. Es ist genug, um die übergreifenden Konzept, mehr als nur ein wenig verwirrend, was genau die API ist mess-aber, noch wichtiger ist, dass es leicht zu übersehen, die bestimmte goodies, die wir mit ihm bekommen.

Hier ist eine illustration dafür, wie alle diese Teile zusammenpassen. Dies kann super verwirrend, so dass eine visuelle kann helfen, zu klären, wovon wir reden.

Die Performance-API enthält die Performance-Zeitleiste-API, und Sie bilden zusammen eine Breite Palette von Methoden, die fetch nützliche Metriken, die auf der Web-Seite der performance.

Lassen Sie uns in Graben, sollen wir?

High Resolution Time API

Die performance-interface ist ein Teil der High-Resolution-Time-API.

“Was ist High-Resolution Time?” könnten Sie Fragen. Das ist ein Schlüssel-Konzept können wir nicht übersehen.

Eine Zeit, die auf dem Datum basiert, ist auf die Millisekunde genau. Eine hohe Auflösung der Zeit, auf der anderen hand, ist präzise bis auf Bruchteile von Millisekunden. Das ist verdammt präzise, so dass es ideal für die zu genauen Messungen der Zeit.

Es ist hervorzuheben, dass eine hohe Auflösung der gemessenen Zeit durch User Agent (UA) ändert sich nicht mit den änderungen im system Zeit, weil es aus einer globalen, zunehmend monotonic clock erstellt von UA. Die Zeit immer erhöht und Sie können nicht gezwungen werden, zu verringern. Das wird eine sinnvolle Einschränkung für die Zeit der Messung.

Jedes mal, Messung, gemessen in der Performance-API ist eine hohe Auflösung der Zeit. Nicht nur, dass es ein super präzisen Weg, um die Leistung zu Messen aber es ist auch, was macht die API ein Teil der High-Resolution-Time-API und warum sehen wir die beiden oft zusammen genannt.

Performance-Zeitleiste-API

Der Performance-Zeitleiste-API ist eine Erweiterung des Performance API. Das bedeutet, dass bei denen die Leistung API ist Teil der High-Resolution-Time-API, die Performance Timeline-API ist Teil der Performance-API.

Oder, um es prägnanter:

High Resolution Time API
└── Performance API
└── Performance-Zeitleiste-API

Performance-Zeitleiste-API gibt uns Zugang zu nahezu allen Messungen und Werte, die uns werden kann aus der Gesamtheit der Performance-API selbst. Das ist eine Menge von Informationen auf unserer Fingerspitzen mit einem einzigen API-und warum das Diagramm am Anfang dieses Artikels zeigt Sie fast auf der gleichen Ebene wie alle anderen.

Es gibt viele Erweiterungen des Performance API. Jeder gibt performance-bezogenen Einträge und alle von Ihnen zugegriffen werden kann und auch gefiltert durch Performance-Zeitleiste, so dass dies ein muss-lernen-API für wer will, um die ersten Schritte mit performance-Messungen. Sie sind so eng miteinander verbunden und ergänzen, dass es Sinn macht sich vertraut zu sein mit beiden.

Im folgenden werden drei Methoden der Performance-Zeitleiste-API werden die in der Leistung-Schnittstelle:

  • getEntries()
  • getEntriesByName()
  • getEntriesByType()

Jede Methode liefert eine Liste (wahlweise gefiltert) Leistung Einträge gesammelt von allen anderen Erweiterungen des Performance-API, und wir bekommen mehr vertraut mit Ihnen, wie wir gehen.

Eine weitere wichtige Schnittstelle im API enthalten ist PerformanceObserver. Es sieht für einen neuen Eintrag in eine bestimmte Liste von Leistung-Einträge und informiert über das gleiche. Ziemlich praktisch für die Echtzeit-überwachung!

Die Performance-Einträge

Die Dinge, wir Messen Sie mit dem Performance-API, bezeichnet als “Einträge” und Sie alle bieten einen umfassenden Einblick in Web-performance.

Neugierig, was Sie sind? MDN hat eine vollständige Liste, die wahrscheinlich aktualisiert werden, sobald neue Artikel veröffentlicht werden, aber dies ist, was wir derzeit haben:

Eintrag
Was es Misst
Eltern-API
Rahmen Maßnahmen, die frames stellen eine Schleife von der Menge an Arbeit, die ein browser benötigt zu tun, Dinge zu verarbeiten, wie DOM-Ereignisse, vergrößern, verkleinern, scrollen und CSS-Animationen. Frame-Timing-API
mark Erstellt einen timestamp in der performance-Zeitleiste liefert Werte für ein name, Startzeit und Dauer. User Timing API
Messen Ähnlich wie mark, dass Sie Punkte auf der Zeitachse, aber Sie sind benannt für Sie und platzierte sich zwischen den Markierungen. Im Grunde, Sie sind ein Mittelpunkt zwischen den Marken mit keine benutzerdefinierten Namen Wert. User Timing API
navigation Bietet Kontext für den Ladevorgang, wie die Arten der Ereignisse, die auftreten. Navigation Timing API
Farbe Berichte Momenten, wenn Pixel auf dem Bildschirm dargestellt werden, wie die erste Farbe, die erste Farbe mit Inhalten, die Startzeit und Gesamtdauer. Farbe Timing API
Ressource Misst die Latenz von Abhängigkeiten für die Darstellung auf dem Bildschirm, wie Bilder, Scripte und stylesheets. Dies ist, wo das caching macht den Unterschied! Resource Timing API

Schauen wir uns einige Beispiele an, die illustrieren, wie die jeweiligen API sieht in der Nutzung. Zu lernen, mehr in die Tiefe zu Ihnen, können Sie heraus überprüfen die Spezifikationen verwiesen werden, in der obigen Tabelle. Der Rahmen-Timing-API ist noch in Arbeit.

Farbe Timing API, bequem, bereits abgedeckt gründlich auf CSS-Tricks, aber hier ist ein Beispiel für das ziehen der Zeitstempel beim malen beginnt:

// Zeit, wenn die Seite fing an zu Rendern
console.log(Leistung.getEntriesByType(‘Farbe’)[0].startTime)

Die User-Timing-API kann die Messung der Leistung für Entwickler-scripts. Zum Beispiel, sagen, Sie haben code bestätigt, dass eine hochgeladene Datei. Wir können Messen, wie lange es dauert, um ausführen:

// Zeit-zu-Konsole-print “Hallo”
// Wir könnten auch Gebrauch machen von “performance.measure()” um die Zeit zu Messen
// statt der Berechnung der Differenz zwischen den Noten in der letzten Zeile.
Leistung.mark(“)
console.log(‘Hallo’)
Leistung.mark(“)
var Noten = Leistung.getEntriesByType(‘mark’)
console.info(`die Zeit nahm, um zu sagen, Hallo ${Markierungen[1].startTime – Marken[0].startTime}`)

Die Navigation-Timing-API zeigt Metriken für das laden der aktuellen Seite, Metriken auch aus, wenn die Entladung der vorherigen Seite fand. Wir können Messen, mit einer Tonne von Präzision für genau, wie lange eine aktuelle Seite zum laden benötigt:

// Zeit bis zum abschließen der DOM content loaded-Ereignis
var navEntry = Leistung.getEntriesByType(‘navigation’)[0]
console.log(navEntry.domContentLoadedEventEnd – navEntry.domContentLoadedEventStart)

Die Resource Timing API ist ähnlich wie die Navigation-Timing-API ist, dass es Maßnahmen Ladezeiten, außer es misst alle Metriken, die für das laden der angeforderten Ressourcen, die von einer aktuellen Seite anstatt die aktuelle Seite selbst. Wir können zum Beispiel Messen, wie lange es dauert, um ein Bild auf einem anderen server gehostet, wie z.B. einem CDN zu laden auf der Seite:

// Ansprechzeit von Ressourcen
Leistung.getEntriesByType(‘resource’).forEach((r) => {
console.log(`Reaktionszeit für ${r.name}: ${r.responseEnd – r.responseStart}`);
});

Die Navigation Anomalie

Hören möchte, eine interessante Leckerbissen über die Navigation-Timing-API?

Es wurde erdacht, bevor es das Performance-Zeitleiste-API. Das ist, warum, obwohl Sie Zugriff auf einige Navigations-Metriken mithilfe der Performance-Zeitleiste-API (durch Filterung der Navigationspunkt-Typ), die Navigation-Timing-API selbst hat zwei Schnittstellen, die direkt erstreckte sich von der Performance der API:

  • Leistung.timing
  • Leistung.navigation

Alle Metriken zur Verfügung gestellt von der Leistung.die navigation kann durch navigation Einträge der Performance-Zeitleiste-API. Da für die Messwerte, die Sie abrufen von Leistung.timing, jedoch nur einige sind zugänglich aus der Performance-Zeitleiste-API.

Als ein Ergebnis, nutzen wir die Leistung.timing, um die navigation Metriken für die aktuelle Seite statt mit der Performance-Zeitleiste-API über die Leistung.getEntriesByType(“navigation”):

// Zeit von start der navigation auf der aktuellen Seite zum Ende seiner load-Ereignis
addEventListener(‘load’, () => {
mit(Leistung.timing)
console.log(navigationStart – loadEventEnd);
})

Let ‘ s Wrap Up

Ich würde sagen, Ihre beste Wette für das erhalten begonnen mit der Leistung API zu beginnen Sie kennen alle die performance-Typen und deren Attribute. Diese erhalten Sie schnell Bekanntschaft mit der end-Ergebnisse aller APIs—und die macht dieses API stellt für die Messung der Leistung.

Als zweite Massnahme, um zu wissen, wie der Performance-Zeitleiste-API-Sonden in alle verfügbaren Metriken. Wie wir bereits, die zwei sind eng miteinander verbunden und das zusammenspiel zwischen den beiden öffnen sich interessante und hilfreiche Methoden der Messung.

An diesem Punkt, Sie können einen Schritt in Richtung der Beherrschung der feinen Kunst des puttens die anderen erweiterten APIs zu verwenden. Das ist, wo alles zusammen kommt und man endlich das vollständige Bild sehen, wie alle diese APIs, Methoden und Einträge miteinander verbunden sind.