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

Philip Walton

chrome.loadTimes() è un'API non standard che espone metriche di caricamento e informazioni sulla rete agli sviluppatori per aiutarli a comprendere meglio il rendimento del loro sito nel mondo reale.

Poiché questa API è stata implementata nel 2009, tutte le informazioni utili che genera possono essere ritrovate in API standardizzate come:

• Tempistiche navigazione 2
• Tempistiche di applicazione della vernice
• L'aggiunta di nextHopProtocol a Navigation Timing 2 e Resource Timing 2.

Queste API standardizzate sono in fase di implementazione da parte di più fornitori di browser. Di conseguenza, chrome.loadTimes() verrà ritirato in Chrome 64.

L'API deprecata

La funzione chrome.loadTimes() restituisce un singolo oggetto contenente tutte le informazioni sul caricamento e sulla 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 sopra indicati utilizzando API standardizzate. La tabella seguente associa ciascun valore alla relativa API standardizzata e le sezioni seguenti mostrano esempi di codice su come ottenere ciascun valore nella vecchia API con gli equivalenti moderni.

chrome.loadTimes() funzionalità	Sostituzione dell'API standardizzata
requestTime	Tempo di navigazione 2
startLoadTime	Tempo di navigazione 2
commitLoadTime	Tempo di navigazione 2
finishDocumentLoadTime	Tempo di navigazione 2
finishLoadTime	Tempo di navigazione 2
firstPaintTime	Tempo di applicazione della vernice
firstPaintAfterLoadTime	N/D
navigationType	Tempo di navigazione 2
wasFetchedViaSpdy	Tempo di navigazione 2
wasNpnNegotiated	Tempo di navigazione 2
npnNegotiatedProtocol	Tempo di navigazione 2
wasAlternateProtocolAvailable	N/D
connectionInfo	Tempo di navigazione 2

Nota: alcune funzionalità dell'API originale non sono mai state implementate o si applicano solo alle funzionalità ritirate. Questi valori sono contrassegnati come "N/A" nella tabella sopra.

Gli esempi di codice riportati di seguito restituiscono valori equivalenti a quelli restituiti da chrome.loadTimes(). Tuttavia, per il nuovo codice, questi esempi di codice non sono consigliati. Il motivo è che chrome.loadTimes() restituisce valori di tempo in ora di epoch in secondi, mentre le nuove API di rendimento tipicamente riportano valori in millisecondi rispetto all'origine tempo di una pagina, che tende a essere più utile per l'analisi del rendimento.

Molti degli esempi favoriscono anche le API Performance Timeline 2 (ad es.performance.getEntriesByType()), ma forniscono soluzioni di riserva per l'API Navigation Timing 1 precedente, in quanto supporta un numero maggiore di browser. In futuro, le API Performance Timeline saranno preferite e in genere verranno registrate con una precisione maggiore.

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 dovrebbe essere rimossa alla fine del 2018. Gli sviluppatori devono eseguire la migrazione del codice il prima possibile per evitare la perdita di dati.

Intento di ritiro | Tracker di Chromestatus | Bug di Chromium