Signatur
Beschreibung
Die Schnittstelle PerformanceTiming stammt aus der Spezifikation Navigation Timing Level 1. Sie liefert Zeitstempel für die einzelnen Phasen beim Laden des aktuellen Dokuments: Umleitungen, DNS-Auflösung, TCP- und TLS-Verbindung, Anfrage und Antwort, DOM-Aufbau und das load-Ereignis. Eine Instanz erhält man ausschließlich über die schreibgeschützte Eigenschaft window.performance.timing. Selbst erzeugen kann man sie nicht.
Alle Eigenschaften sind vom Typ number (unsigned long long) und geben absolute Unix-Zeitstempel in Millisekunden an, gemessen seit dem 1. 1. 1970. Solange eine Phase noch nicht stattgefunden hat, ist der Wert 0. Die wichtigsten Eigenschaften in zeitlicher Reihenfolge:
navigationStart,unloadEventStart,unloadEventEndredirectStart,redirectEnd,fetchStartdomainLookupStart,domainLookupEnd,connectStart,secureConnectionStart,connectEndrequestStart,responseStart,responseEnddomLoading,domInteractive,domContentLoadedEventStart,domContentLoadedEventEnd,domCompleteloadEventStart,loadEventEnd
Außerdem gibt es die Methode toJSON(). Sie liefert ein einfaches Objekt mit allen Werten, das sich zum Beispiel für die Übertragung an einen Analyse-Server eignet.
Für neuen Code sollte man stattdessen PerformanceNavigationTiming verwenden (erreichbar über performance.getEntriesByType("navigation")). Diese Schnittstelle arbeitet mit hochauflösenden, relativen Zeitwerten (DOMHighResTimeStamp) und stellt zusätzliche Informationen bereit, etwa transferSize oder type.
Rückgabewert
performance.timing erreichbar. Alle ihre Eigenschaften sind number-Werte in Millisekunden seit der Unix-Epoche oder 0, wenn die Phase noch nicht erreicht wurde.Beispiele
Ladezeiten nach dem load-Ereignis berechnen
window.addEventListener('load', () => {
// loadEventEnd wird erst nach Ende des load-Handlers gesetzt, daher verzögern
setTimeout(() => {
const t = performance.timing;
const messwerte = {
dns: t.domainLookupEnd - t.domainLookupStart,
tcp: t.connectEnd - t.connectStart,
ttfb: t.responseStart - t.requestStart,
download: t.responseEnd - t.responseStart,
domReady: t.domContentLoadedEventEnd - t.navigationStart,
gesamt: t.loadEventEnd - t.navigationStart
};
console.table(messwerte);
}, 0);
});Alle Werte per toJSON() an einen Server senden
window.addEventListener('load', () => {
setTimeout(() => {
const daten = performance.timing.toJSON();
navigator.sendBeacon('/analytics/timing', JSON.stringify(daten));
console.log(Object.keys(daten).length, 'Messwerte gesendet');
}, 0);
});Moderne Alternative mit Rückgriff auf die alte API
const ladezeitErmitteln = () => {
const [nav] = performance.getEntriesByType('navigation');
if (nav) {
// PerformanceNavigationTiming: Werte relativ zu startTime (0)
return Math.round(nav.loadEventEnd);
}
// Rückgriff auf das veraltete PerformanceTiming
const t = performance.timing;
return t.loadEventEnd - t.navigationStart;
};
window.addEventListener('load', () => {
setTimeout(() => console.log(`Ladezeit: ${ladezeitErmitteln()} ms`), 0);
});// Wichtig · Fallstricke
Veraltet: PerformanceTiming und performance.timing sind in der Spezifikation als veraltet markiert. Die Browser unterstützen sie nur noch aus Gründen der Abwärtskompatibilität. Für neuen Code sollte man PerformanceNavigationTiming verwenden. In Web Workern steht die Schnittstelle nicht zur Verfügung.
- Wert
0: Eigenschaften für Phasen, die noch nicht stattgefunden haben, sind0. Wer direkt imload-Handler liest, bekommt fürloadEventEndnoch0und damit einen negativen Differenzwert. Deshalb sollte man die Auswertung persetTimeoutverzögern. - Auflösung: Die Werte sind ganze Millisekunden als absolute Zeitstempel und werden deshalb von Änderungen der Systemuhr beeinflusst.
DOMHighResTimeStampist genauer und läuft gleichmäßig weiter (monoton). - Umleitungen und Unload:
redirectStart/redirectEndundunloadEventStart/unloadEventEndbleiben0, wenn die Umleitung oder die vorherige Seite von einem anderen Ursprung stammt. secureConnectionStartist bei HTTP-Verbindungen0. Ältere Browser liefern hierundefined.- Datenschutz: Um Timing-Angriffe zu erschweren, können Browser die Genauigkeit der Zeitwerte absichtlich verringern.