Chrome 64 beëindigt de chrome.loadTimes() API,Chrome 64 beëindigt de chrome.loadTimes() API

Philip Walton

chrome.loadTimes() is een niet-standaard API die laadstatistieken en netwerkinformatie beschikbaar stelt aan ontwikkelaars, zodat ze de prestaties van hun site in de echte wereld beter kunnen begrijpen.

Sinds deze API in 2009 werd geïmplementeerd, is alle nuttige informatie die erin wordt gerapporteerd te vinden in gestandaardiseerde API's zoals:

• Navigatietiming 2
• Verftiming
• De nextHopProtocol toevoeging aan Navigation Timing 2 en Resource Timing 2 .

Deze gestandaardiseerde API's worden door meerdere browserleveranciers geïmplementeerd. Als gevolg hiervan wordt chrome.loadTimes() beëindigd in Chrome 64.

De verouderde API

De functie chrome.loadTimes() retourneert een enkel object dat alle laad- en netwerkinformatie bevat. Het volgende object is bijvoorbeeld het resultaat van het aanroepen van chrome.loadTimes() op 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"
}

Gestandaardiseerde vervangingen

U kunt nu elk van de bovenstaande waarden vinden met behulp van gestandaardiseerde API's. De volgende tabel koppelt elke waarde aan de gestandaardiseerde API, en de onderstaande secties tonen codevoorbeelden van hoe u elke waarde in de oude API kunt verkrijgen met moderne equivalenten.

chrome.loadTimes() -functie	Gestandaardiseerde API-vervanging
requestTime	Navigatietiming 2
startLoadTime	Navigatietiming 2
commitLoadTime	Navigatietiming 2
finishDocumentLoadTime	Navigatietiming 2
finishLoadTime	Navigatietiming 2
firstPaintTime	Verftiming
firstPaintAfterLoadTime	N.v.t
navigationType	Navigatietiming 2
wasFetchedViaSpdy	Navigatietiming 2
wasNpnNegotiated	Navigatietiming 2
npnNegotiatedProtocol	Navigatietiming 2
wasAlternateProtocolAvailable	N.v.t
connectionInfo	Navigatietiming 2

Opmerking: sommige functies van de oorspronkelijke API zijn nooit geïmplementeerd of zijn alleen van toepassing op verouderde functies. Deze zijn in de bovenstaande tabel gemarkeerd met "N.v.t.".

De onderstaande codevoorbeelden retourneren equivalente waarden als de waarden die worden geretourneerd door chrome.loadTimes() . Voor nieuwe code worden deze codevoorbeelden echter niet aanbevolen. De reden hiervoor is dat chrome.loadTimes() maalwaarden in epoch-tijd in seconden geeft, terwijl nieuwe prestatie-API's doorgaans waarden in milliseconden rapporteren ten opzichte van de tijdoorsprong van een pagina, wat doorgaans nuttiger is voor prestatieanalyse.

Verschillende van de voorbeelden geven ook de voorkeur aan Performance Timeline 2 API's (bijv. performance.getEntriesByType() ) maar bieden terugvalmogelijkheden voor de oudere Navigation Timing 1 API omdat deze bredere browserondersteuning heeft. In de toekomst wordt de voorkeur gegeven aan Performance Timeline API's, die doorgaans met hogere nauwkeurigheid worden gerapporteerd.

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

Verhuisplan

De chrome.loadTimes() API wordt verouderd in Chrome 64 en zal naar verwachting eind 2018 worden verwijderd. Ontwikkelaars moeten hun code zo snel mogelijk migreren om gegevensverlies te voorkomen.

Intentie om af te schaffen | Chromestatustracker | Chroombug