Chrome 64 wycofa interfejs chrome.loadTimes() API

Philip Walton

chrome.loadTimes() to niestandardowy interfejs API, który udostępnia deweloperom dane dotyczące wczytywania i informacje o sieci, aby pomóc im lepiej poznać wydajność witryny w rzeczywistości.

Ponieważ ten interfejs API został wdrożony w 2009 roku, wszystkie przydatne przez niego informacje można znaleźć w standardowych interfejsach API, takich jak:

Te ustandaryzowane interfejsy API są wdrażane przez wielu dostawców przeglądarek. Z tego powodu interfejs chrome.loadTimes() jest wycofywany z Chrome 64.

Wycofany interfejs API

Funkcja chrome.loadTimes() zwraca pojedynczy obiekt zawierający wszystkie informacje o sieci i ładowaniu. Na przykład ten obiekt jest wynikiem wywołania chrome.loadTimes() na stronie 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"
}

Znormalizowane zamienniki

Każdą z tych wartości możesz teraz znaleźć za pomocą standardowych interfejsów API. Tabela poniżej dopasowuje każdą wartość do jej standardowego interfejsu API. W sekcjach poniżej znajdziesz przykłady pobierania poszczególnych wartości w starym interfejsie API z nowoczesnymi odpowiednikami.

chrome.loadTimes() funkcja Ujednolicone zastępowanie interfejsów API
requestTime Czas nawigacji 2
startLoadTime Czas nawigacji 2
commitLoadTime Czas nawigacji 2
finishDocumentLoadTime Czas nawigacji 2
finishLoadTime Czas nawigacji 2
firstPaintTime Czas renderowania
firstPaintAfterLoadTime Nie dotyczy
navigationType Czas nawigacji 2
wasFetchedViaSpdy Czas nawigacji 2
wasNpnNegotiated Czas nawigacji 2
npnNegotiatedProtocol Czas nawigacji 2
wasAlternateProtocolAvailable Nie dotyczy
connectionInfo Czas nawigacji 2

Poniższe przykłady kodu zwracają wartości równoważne z tymi zwróconymi przez funkcję chrome.loadTimes(). Jednak w nowym kodzie te przykłady nie są zalecane. Wynika to z tego, że chrome.loadTimes() podaje wartości czasu w czasie epoki w sekundach, a nowe interfejsy API wydajności zwykle podają wartości w milisekundach w odniesieniu do początku czasu strony, co z reguły przydaje się przy analizie wydajności.

Kilka z przykładów faworyzuje też interfejsy API Performance Timeline 2 (np. performance.getEntriesByType()), ale zawierają elementy zastępcze dla starszego interfejsu API Nawigacja Timing 1, ponieważ ma on szerszą obsługę przeglądarek. Od tej pory preferowane są interfejsy Performance Timeline API, które są zwykle raportowane z większą precyzją.

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 usuwania

Interfejs chrome.loadTimes() API zostanie wycofany w Chrome 64 i zamierzamy usunąć go pod koniec 2018 r. Aby uniknąć utraty danych, deweloperzy powinni przeprowadzić migrację kodu jak najszybciej.

Intencje do wycofania | Narzędzie do śledzenia stanu Chrome | Błąd Chromium