chrome.loadTimes()
è un'API non standard che espone metriche di caricamento e
informazioni di rete agli sviluppatori al fine di aiutarli a comprendere meglio
le prestazioni del sito nel mondo reale.
Da quando l'API è stata implementata nel 2009, è possibile trovare tutte le informazioni utili presente in API standardizzate come:
- Tempistiche navigazione 2
- Tempi colori
- La
nextHopProtocol
oltre a Navigation Timing 2 e Tempi risorse 2.
Queste API standardizzate vengono implementate da più fornitori di browser. Come
risultato, chrome.loadTimes()
verrà deprecato in Chrome 64.
L'API ritirata
La funzione chrome.loadTimes()
restituisce un singolo oggetto contenente tutti i suoi
caricamento e informazioni di rete. Ad esempio, il seguente oggetto è il risultato
di chiamare chrome.loadTimes()
su 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"
}
Sostituzioni standardizzate
Ora puoi trovare ciascuno dei valori precedenti utilizzando API standardizzate. Le seguenti abbina ciascun valore all'API standardizzata e le sezioni seguenti mostrano esempi di codice su come ottenere ogni valore nell'API precedente con gli equivalenti moderni.
chrome.loadTimes() funzionalità
| Sostituzione API standardizzata |
---|---|
requestTime |
Tempi navigazione 2 . |
startLoadTime |
Tempi navigazione 2 . |
commitLoadTime |
Tempi navigazione 2 . |
finishDocumentLoadTime |
Tempi navigazione 2 . |
finishLoadTime |
Tempi navigazione 2 . |
firstPaintTime |
Tempi verniciatura . |
firstPaintAfterLoadTime |
N/D |
navigationType |
Tempi navigazione 2 . |
wasFetchedViaSpdy |
Tempi navigazione 2 . |
wasNpnNegotiated |
Tempi navigazione 2 . |
npnNegotiatedProtocol |
Tempi navigazione 2 . |
wasAlternateProtocolAvailable |
N/D |
connectionInfo |
Tempi navigazione 2 . |
I seguenti esempi di codice restituiscono valori equivalenti a quelli restituiti da
chrome.loadTimes()
. Tuttavia, per il nuovo codice, questi esempi di codice non sono
consigliato. Il motivo è che chrome.loadTimes()
fornisce valori moltiplicati nel tempo e tempo in secondi, mentre le nuove API Performance
di solito riporta i valori in millisecondi relativi alla
origine temporale, che tende a
essere più utile per l'analisi del rendimento.
Molti degli esempi favoriscono anche le API Performance Spostamenti 2 (ad es.
performance.getEntriesByType()
) ma fornisci opzioni di riserva per la versione precedente
API Navigazione Timing 1 così com'è
un maggior numero di browser. In futuro, preferiranno le API Performance Spostamenti
e vengono generalmente generati con maggiore precisione.
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;
}
}
Piano di rimozione
L'API chrome.loadTimes()
verrà deprecata in Chrome 64 e sarà
rimosso alla fine del 2018. Gli sviluppatori dovrebbero eseguire la migrazione del loro codice il prima possibile
per evitare perdite di dati.
Intento di ritiro | Tracker dello stato di Chrome | Bug di Chromium