Chrome 64 zur Einstellung der chrome.loadTimes() API

Philip Walton

chrome.loadTimes() ist eine nicht standardmäßige API, die Entwicklern Lademesswerte und Netzwerkinformationen zur Verfügung stellt, damit sie die Leistung ihrer Website in der realen Welt besser nachvollziehen können.

Seit der Implementierung dieser API im Jahr 2009 sind alle nützlichen Informationen, die sie meldet, in standardisierten APIs zu finden. Beispiele:

• Navigation Timing 2
• Farben-Timing
• nextHopProtocol ist eine Ergänzung zu Navigation Timing 2 und Resource Timing 2.

Diese standardisierten APIs werden von mehreren Browseranbietern implementiert. Daher wird chrome.loadTimes() in Chrome 64 eingestellt.

Die eingestellte API

Die Funktion chrome.loadTimes() gibt ein einzelnes Objekt zurück, das alle Lade- und Netzwerkinformationen enthält. Das folgende Objekt ist beispielsweise das Ergebnis des Aufrufs von chrome.loadTimes() auf 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"
}

Standardisierte Ersatzgeräte

Alle oben genannten Werte sind jetzt über standardisierte APIs verfügbar. In der folgenden Tabelle wird jeder Wert mit seiner standardisierten API abgeglichen. In den folgenden Abschnitten finden Sie Codebeispiele dazu, wie Sie die einzelnen Werte in der alten API mit modernen Äquivalenten abrufen.

Die folgenden Codebeispiele geben Werte zurück, die den von chrome.loadTimes() zurückgegebenen Werten entsprechen. Für neuen Code sind diese Codebeispiele jedoch nicht empfehlenswert. Der Grund dafür ist, dass chrome.loadTimes() Zeitwerte in Epochenzeit in Sekunden angibt, während neue Leistungs-APIs in der Regel Werte in Millisekunden im Verhältnis zum Ursprungszeitpunkt einer Seite melden, was für die Leistungsanalyse in der Regel nützlicher ist.

In einigen der Beispiele werden auch Performance Timeline 2 APIs (z.B. performance.getEntriesByType()) bevorzugt, aber es gibt Fallbacks für die ältere Navigation Timing 1 API, da sie von mehr Browsern unterstützt wird. Künftig werden APIs für die Leistungszeitachse bevorzugt und in der Regel mit höherer Genauigkeit erfasst.

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

Entfernungsplan

Die chrome.loadTimes() API wird in Chrome 64 eingestellt und voraussichtlich Ende 2018 entfernt. Entwickler sollten ihren Code so schnell wie möglich migrieren, um Datenverluste zu vermeiden.

Beabsichtigte Einstellung | Chromestatus-Tracker | Chromium-Fehler