chrome.loadTimes()
es una API no estándar que expone las métricas de carga y
información de redes de contacto a los desarrolladores para ayudarlos a comprender mejor sus
del rendimiento de tu sitio web en el mundo real.
Desde que se implementó esta API en 2009, toda la información útil que presenta que se encuentran en APIs estandarizadas, como las siguientes:
- Tiempo de navegación 2
- Tiempo de pintura
- La
nextHopProtocol
además de Navigation Timing 2 y Tiempo de recursos 2.
Varios proveedores de navegadores están implementando estas APIs estandarizadas. Como
En este caso, chrome.loadTimes()
dejará de estar disponible en Chrome 64.
La API obsoleta
La función chrome.loadTimes()
muestra un único objeto que contiene todos sus
y la información de red y de carga. Por ejemplo, el siguiente objeto es el resultado
para 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 las APIs estandarizadas. Lo siguiente compara cada valor con su API estandarizada. En las siguientes secciones, se muestra ejemplos de código sobre cómo obtener cada valor en la API anterior con equivalentes modernos.
chrome.loadTimes() función
| Reemplazo estandarizado de la API |
---|---|
requestTime |
Tiempo de navegación 2 |
startLoadTime |
Tiempo de navegación 2 |
commitLoadTime |
Tiempo de navegación 2 |
finishDocumentLoadTime |
Tiempo de navegación 2 |
finishLoadTime |
Tiempo de navegación 2 |
firstPaintTime |
Tiempo de pintura |
firstPaintAfterLoadTime |
N/A |
navigationType |
Tiempo de navegación 2 |
wasFetchedViaSpdy |
Tiempo de navegación 2 |
wasNpnNegotiated |
Tiempo de navegación 2 |
npnNegotiatedProtocol |
Tiempo de navegación 2 |
wasAlternateProtocolAvailable |
N/A |
connectionInfo |
Tiempo de navegación 2 |
Los siguientes ejemplos de código devuelven valores equivalentes a los que devuelven
chrome.loadTimes()
Sin embargo, para el código nuevo,
estos ejemplos no son
se recomienda. El motivo es que chrome.loadTimes()
proporciona valores de horas en época en segundos, mientras que las nuevas APIs de rendimiento
suelen informar valores en milisegundos en relación con la longitud
origen de tiempo, que suele ser
ser más útiles para el análisis del rendimiento.
Varios de los ejemplos también favorecen a las APIs del Cronograma de rendimiento 2 (p.ej.,
performance.getEntriesByType()
), pero proporciona resguardos para la opción anterior.
API de Navigation Timing 1 como tiene
mayor compatibilidad con navegadores. De ahora en adelante, se preferirán las APIs de Performance Rutas
y 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;
}
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;
}
}
Plan de eliminación
La API de chrome.loadTimes()
dejará de estar disponible en Chrome 64 y se prevé que será
que se quitaron a finales de 2018. Los desarrolladores deben migrar su código lo antes posible
para evitar la pérdida de datos.
Intención de dar de baja | Seguimiento de Chromestatus | Error de Chromium