Questa pagina è stata tradotta dall'API Cloud Translation.

Chrome 64 per ritirare l'API chrome.loadTimes()

Philip Walton

Twitter GitHub Homepage

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