chrome.loadTimes()
è un'API non standard che espone metriche di caricamento e informazioni di rete agli sviluppatori per aiutarli a comprendere meglio le prestazioni del loro sito nel mondo reale.
Dall'implementazione di questa API nel 2009, tutte le informazioni utili che segnala sono disponibili nelle API standardizzate come:
- Tempi di navigazione 2
- Tempistiche di vernice
- L'
nextHopProtocol
aggiunta a Navigation Timing 2 e Resource Timing 2.
Queste API standardizzate sono implementate da diversi fornitori di browser. Di conseguenza, chrome.loadTimes()
verrà ritirato in Chrome 64.
L'API ritirata
La funzione chrome.loadTimes()
restituisce un singolo oggetto contenente tutte le relative informazioni di caricamento e di rete. Ad esempio, l'oggetto seguente è il risultato della chiamata a 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. La seguente tabella associa ogni valore alla relativa API standardizzata e le sezioni seguenti mostrano esempi di codice su come ottenere ciascun valore nella vecchia API con equivalenti moderni.
chrome.loadTimes() funzionalità
| Sostituzione API standardizzata |
---|---|
requestTime |
Tempi di navigazione 2 |
startLoadTime |
Tempi di navigazione 2 |
commitLoadTime |
Tempi di navigazione 2 |
finishDocumentLoadTime |
Tempi di navigazione 2 |
finishLoadTime |
Tempi di navigazione 2 |
firstPaintTime |
Tempo di colorazione |
firstPaintAfterLoadTime |
N/A |
navigationType |
Tempi di navigazione 2 |
wasFetchedViaSpdy |
Tempi di navigazione 2 |
wasNpnNegotiated |
Tempi di navigazione 2 |
npnNegotiatedProtocol |
Tempi di navigazione 2 |
wasAlternateProtocolAvailable |
N/A |
connectionInfo |
Tempi di navigazione 2 |
Gli esempi di codice riportati di seguito restituiscono valori equivalenti a quelli restituiti da chrome.loadTimes()
. Tuttavia, questi esempi di codice non sono consigliati per il nuovo codice. Il motivo è che chrome.loadTimes()
fornisce i valori temporali in tempo di epoch in secondi, mentre le nuove API per le prestazioni di solito riportano i valori in millisecondi rispetto all'origine temporale di una pagina, che tende a essere più utile per l'analisi delle prestazioni.
Molti di questi esempi prediligono anche le API Performance Timeline 2 (ad es. performance.getEntriesByType()
), ma forniscono i fallback per la precedente API Navigator Timing 1 in quanto offre un supporto del browser più ampio. In futuro è preferibile utilizzare le API Performance
Timeline, che vengono generalmente segnalate 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à ritirata in Chrome 64 e verrà rimossa alla fine del 2018. Gli sviluppatori dovrebbero eseguire la migrazione del codice il prima possibile
per evitare perdite di dati.
Intent di deprecazione | Tracker di stato di Chrome | Bug di Chromium