chrome.loadTimes()
ist eine nicht standardmäßige API, die Lademesswerte und
Netzwerkinformationen an Entwickelnde, damit diese ihre
die Leistung Ihrer Website in der realen Welt.
Seit der Implementierung dieses APIs im Jahr 2009 können alle nützlichen Informationen, die es meldet, in standardisierten APIs wie den folgenden zu finden:
- Navigation Timing 2
- Farben-Timing
- Die
nextHopProtocol
Navigation Timing 2 und Ressourcentiming 2:
Diese standardisierten APIs werden von mehreren Browseranbietern implementiert. Als
führt, wird chrome.loadTimes()
in Chrome 64 eingestellt.
Die eingestellte API
Die chrome.loadTimes()
-Funktion gibt ein einzelnes Objekt zurück, das alle seine
Lade- und Netzwerkinformationen. Das folgende Objekt ist beispielsweise das Ergebnis
nach dem Anruf bei chrome.loadTimes()
unter www.google.com:
{
"requestTime": 1513186741.847,
"startLoadTime": 1513186741.847,
"commitLoadTime": 1513186742.637,
"finishDocumentLoadTime": 1513186742.842,
"finishLoadTime": 1513186743.582,
"firstPaintTime": 1513186742.829,
"firstPaintAfterLoadTime": 0,
"navigationType": "Reload",
"wasFetchedViaSpdy": true,
"wasNpnNegotiated": true,
"npnNegotiatedProtocol": "h2",
"wasAlternateProtocolAvailable": false,
"connectionInfo": "h2"
}
Standardisierte Ersetzungen
Jeder der oben genannten Werte ist jetzt über standardisierte APIs verfügbar. Die folgenden Tabelle alle Werte ihrer standardisierten API zuordnet. In den folgenden Abschnitten finden Sie Codebeispiele dazu, wie die einzelnen Werte in der alten API mit modernen Entsprechungen abgerufen werden.
chrome.loadTimes() Funktion
| Standardisierter API-Ersatz |
---|---|
requestTime |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
startLoadTime |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
commitLoadTime |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
finishDocumentLoadTime |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
finishLoadTime |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
firstPaintTime |
<ph type="x-smartling-placeholder"></ph> Mal-Timing |
firstPaintAfterLoadTime |
– |
navigationType |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
wasFetchedViaSpdy |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
wasNpnNegotiated |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
npnNegotiatedProtocol |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
wasAlternateProtocolAvailable |
– |
connectionInfo |
<ph type="x-smartling-placeholder"></ph> Navigation Timing 2 |
In den nachfolgenden Codebeispielen werden äquivalente Werte zu den von
chrome.loadTimes()
Für neuen Code sind diese Codebeispiele
wird empfohlen. Der Grund ist, dass chrome.loadTimes()
Malwerte in Epochenzeit in Sekunden angibt, während bei neuen APIs zur Leistungsüberwachung
Üblicherweise geben Werte in Millisekunden relativ zum
Ursprungszeitpunkt, der tendenziell
für die Leistungsanalyse nützlicher sein.
In einigen der Beispiele werden auch APIs für Performance Timeline 2 bevorzugt (z.B.
performance.getEntriesByType()
), aber stellen Sie Fallbacks für die ältere Version bereit.
Die Navigation Timing 1-API
umfassendere Browser-Unterstützung. Künftig werden Performance Timeline APIs bevorzugt.
und werden in der Regel
genauer gemeldet.
requestTime
function requestTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.startTime + performance.timeOrigin) / 1000;
} else {
return performance.timing.navigationStart / 1000;
}
}
startLoadTime
function startLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.startTime + performance.timeOrigin) / 1000;
} else {
return performance.timing.navigationStart / 1000;
}
}
commitLoadTime
function commitLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.responseStart + performance.timeOrigin) / 1000;
} else {
return performance.timing.responseStart / 1000;
}
}
finishDocumentLoadTime
function finishDocumentLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.domContentLoadedEventEnd + performance.timeOrigin) / 1000;
} else {
return performance.timing.domContentLoadedEventEnd / 1000;
}
}
finishLoadTime
function finishLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.loadEventEnd + performance.timeOrigin) / 1000;
} else {
return performance.timing.loadEventEnd / 1000;
}
}
firstPaintTime
function firstPaintTime() {
if (window.PerformancePaintTiming) {
const fpEntry = performance.getEntriesByType('paint')[0];
return (fpEntry.startTime + performance.timeOrigin) / 1000;
}
}
firstPaintAfterLoadTime
function firstPaintTimeAfterLoad() {
// This was never actually implemented and always returns 0.
return 0;
}
navigationType
function navigationType() {
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ntEntry.type;
}
}
wasFetchedViaSpdy
function wasFetchedViaSpdy() {
// SPDY is deprecated in favor of HTTP/2, but this implementation returns
// true for HTTP/2 or HTTP2+QUIC/39 as well.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
}
}
wasNpnNegotiated
function wasNpnNegotiated() {
// NPN is deprecated in favor of ALPN, but this implementation returns true
// for HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
}
}
npnNegotiatedProtocol
function npnNegotiatedProtocol() {
// NPN is deprecated in favor of ALPN, but this implementation returns the
// HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol) ?
ntEntry.nextHopProtocol : 'unknown';
}
}
wasAlternateProtocolAvailable
function wasAlternateProtocolAvailable() {
// The Alternate-Protocol header is deprecated in favor of Alt-Svc
// (https://www.mnot.net/blog/2016/03/09/alt-svc), so technically this
// should always return false.
return false;
}
connectionInfo
function connectionInfo() {
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ntEntry.nextHopProtocol;
}
}
Entfernungsplan
Die chrome.loadTimes()
API wird in Chrome 64 eingestellt und soll
2018 entfernt. Entwickler sollten ihren Code so schnell wie möglich migrieren
um Datenverluste zu vermeiden.
Einstellungsabsicht | Chromestatus-Tracker | Chromium-Fehler