En Chrome 64, la API chrome.loadTimes() dejará de estar disponible

Philip Walton

chrome.loadTimes() es una API no estándar que expone las métricas de carga y la información de red a los desarrolladores para ayudarlos a comprender mejor el rendimiento de su sitio en el mundo real.

Desde que se implementó esta API en 2009, toda la información útil que informa se puede encontrar en APIs estandarizadas, como las siguientes:

Varios proveedores de navegadores implementan estas APIs estandarizadas. Como resultado, chrome.loadTimes() dejará de estar disponible en Chrome 64.

La API obsoleta

La función chrome.loadTimes() muestra un solo objeto que contiene toda la información de carga y red. Por ejemplo, el siguiente objeto es el resultado de una llamada a chrome.loadTimes() en 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"
}

Reemplazos estandarizados

Ahora puedes encontrar cada uno de los valores anteriores mediante el uso de APIs estandarizadas. En la siguiente tabla, se hace coincidir cada valor con su API estandarizada, y en las siguientes secciones, se muestran ejemplos de código para obtener cada valor en la API anterior con equivalentes modernos.

chrome.loadTimes() función Reemplazo estandarizado de la API
requestTime Navigation Timing 2
startLoadTime Navigation Timing 2
commitLoadTime Navigation Timing 2
finishDocumentLoadTime Navigation Timing 2
finishLoadTime Navigation Timing 2
firstPaintTime Paint Timing
firstPaintAfterLoadTime No disponible
navigationType Navigation Timing 2
wasFetchedViaSpdy Navigation Timing 2
wasNpnNegotiated Navigation Timing 2
npnNegotiatedProtocol Navigation Timing 2
wasAlternateProtocolAvailable No disponible
connectionInfo Navigation Timing 2

Los siguientes ejemplos de código muestran valores equivalentes a los que muestra chrome.loadTimes(). Sin embargo, no se recomiendan estos ejemplos para códigos nuevos. El motivo es que chrome.loadTimes() proporciona valores de tiempo en ciclo de entrenamiento en segundos, mientras que las nuevas APIs de rendimiento suelen informar valores en milisegundos relacionados con el origen de tiempo de una página, lo que suele ser más útil para el análisis de rendimiento.

Varios de los ejemplos también favorecen las APIs de Performance Timeline 2 (p.ej., performance.getEntriesByType()), pero proporcionan resguardos para la API anterior de Navigation Timing 1, ya que tiene una compatibilidad más amplia con el navegador. En el futuro, se prefieren las APIs de Rutas de rendimiento, que, por lo general, se informan con mayor precisión.

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;
}

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;
  }
}

Plan de eliminación

La API de chrome.loadTimes() dejará de estar disponible en Chrome 64 y se quitará a finales de 2018. Los desarrolladores deben migrar su código lo antes posible para evitar pérdidas de datos.

Intención de dar de baja | Seguimiento de Chromestatus | Error de Chromium