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 llamar 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 con APIs estandarizadas. En la siguiente tabla, cada valor coincide con su API estandarizada, y en las secciones que aparecen a continuación, se muestran ejemplos de código para obtener cada valor en la API anterior con equivalentes modernos.

chrome.loadTimes() función Reemplazo de API estandarizado
requestTime Tiempos de navegación 2
startLoadTime Tiempos de navegación 2
commitLoadTime Tiempos de navegación 2
finishDocumentLoadTime Tiempos de navegación 2
finishLoadTime Navigation Timing 2
firstPaintTime Paint Timing
firstPaintAfterLoadTime N/A
navigationType Tiempos de navegación 2
wasFetchedViaSpdy Tiempos de navegación 2
wasNpnNegotiated Navigation Timing 2
npnNegotiatedProtocol Tiempos de navegación 2
wasAlternateProtocolAvailable N/A
connectionInfo Tiempos de navegación 2

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

Varios de los ejemplos también favorecen las APIs de Performance Timeline 2 (p.ej., performance.getEntriesByType()), pero proporcionan resguardos para la API de Navigation Timing 1 anterior, ya que tiene una compatibilidad más amplia con los navegadores. En el futuro, se preferirán las APIs de Performance Timeline, que suelen informarse 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 fines de 2018. Los desarrolladores deben migrar su código lo antes posible para evitar pérdidas de datos.

Intento de baja | Chromestatus Tracker | Error de Chromium