Chrome 64 abandonne l'API chrome.loadTimes()

Philip Walton

chrome.loadTimes() est une API non standard qui expose des métriques de chargement et informations réseau aux développeurs afin de les aider à mieux comprendre les performances de votre site en situation réelle.

Depuis la mise en œuvre de cette API en 2009, toutes les informations utiles qu'elle signale peuvent être disponibles dans les API standardisées telles que:

• Navigation Timing 2
• Durée de la peinture
• nextHopProtocol en plus de Navigation Timing 2 et Resource Timing 2.

Ces API standardisées sont implémentées par plusieurs fournisseurs de navigateurs. En tant que Résultat : chrome.loadTimes() sera obsolète dans Chrome 64.

L'API obsolète

La fonction chrome.loadTimes() renvoie un seul objet contenant tous ses des informations sur le chargement et le réseau. Par exemple, l'objet suivant correspond au résultat de l'appel de chrome.loadTimes() sur 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"
}

Remplacements standardisés

Vous pouvez désormais trouver chacune des valeurs ci-dessus à l'aide d'API standardisées. Les éléments suivants : établit une correspondance entre chaque valeur et son API standardisée. Les sections ci-dessous présentent des exemples de code montrant comment obtenir chaque valeur dans l'ancienne API avec des équivalents modernes.

Les exemples de code ci-dessous renvoient des valeurs équivalentes à celles renvoyées par chrome.loadTimes() Toutefois, pour le nouveau code, ces exemples de code recommandé. En effet, chrome.loadTimes() donne les valeurs temporelles pour l'heure d'epoch, en secondes, alors que les nouvelles API Performance indiquent généralement des valeurs en millisecondes par rapport à la fréquence l'origine temporelle, qui tend à plus utiles pour l'analyse des performances.

Plusieurs exemples privilégient également les API Performance Timeline 2 (par exemple, performance.getEntriesByType()), mais proposent des solutions de remplacement pour les anciens l'API Navigation Timing 1 telle quelle. compatible avec davantage de navigateurs. À l'avenir, les API Performance Timeline sont à privilégier et sont généralement rapportées avec une plus grande précision.

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 suppression

L'API chrome.loadTimes() sera obsolète dans Chrome 64 et devrait être supprimées fin 2018. Les développeurs doivent migrer leur code dès que possible pour éviter toute perte de données.

Projet d'abandon | Chromestatus Tracker | Bug Chromium