Chrome 64 akan menghentikan penggunaan chrome.loadTimes() API

Philip Walton

chrome.loadTimes() adalah API non-standar yang mengekspos metrik pemuatan dan informasi jaringan kepada developer untuk membantu mereka lebih memahami performa situs di dunia nyata.

Karena API ini diterapkan pada 2009, semua informasi berguna yang dilaporkan dapat ditemukan dalam API standar seperti:

API standar ini sedang diimplementasikan oleh beberapa vendor browser. Akibatnya, chrome.loadTimes() tidak digunakan lagi di Chrome 64.

API yang tidak digunakan lagi

Fungsi chrome.loadTimes() menampilkan satu objek yang berisi semua informasi pemuatan dan jaringannya. Misalnya, objek berikut adalah hasil pemanggilan chrome.loadTimes() di 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"
}

Penggantian standar

Sekarang Anda dapat menemukan setiap nilai di atas menggunakan API standar. Tabel berikut mencocokkan setiap nilai dengan API standarnya, dan bagian di bawah ini menunjukkan contoh kode cara mendapatkan setiap nilai di API lama dengan padanan modern.

chrome.loadTimes() fitur Penggantian API standar
requestTime Waktu Navigasi 2
startLoadTime Waktu Navigasi 2
commitLoadTime Waktu Navigasi 2
finishDocumentLoadTime Waktu Navigasi 2
finishLoadTime Waktu Navigasi 2
firstPaintTime Paint Timing
firstPaintAfterLoadTime T/A
navigationType Waktu Navigasi 2
wasFetchedViaSpdy Waktu Navigasi 2
wasNpnNegotiated Waktu Navigasi 2
npnNegotiatedProtocol Waktu Navigasi 2
wasAlternateProtocolAvailable T/A
connectionInfo Waktu Navigasi 2

Contoh kode di bawah ini menampilkan nilai setara dengan yang ditampilkan oleh chrome.loadTimes(). Namun, untuk kode baru, contoh kode ini tidak direkomendasikan. Alasannya adalah chrome.loadTimes() memberikan nilai waktu dalam waktu epoch dalam detik, sedangkan API performa baru biasanya melaporkan nilai dalam milidetik yang relatif terhadap asal waktu halaman, yang cenderung lebih berguna untuk analisis performa.

Beberapa contoh juga mendukung Performance Timeline 2 API (misalnya performance.getEntriesByType()), tetapi menyediakan fallback untuk Navigation Timing 1 API lama karena memiliki dukungan browser yang lebih luas. Ke depannya, API Linimasa Performa lebih disarankan dan biasanya dilaporkan dengan presisi yang lebih tinggi.

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

Rencana penghapusan

chrome.loadTimes() API tidak akan digunakan lagi di Chrome 64 dan ditargetkan untuk dihapus pada akhir tahun 2018. Developer harus memigrasikan kode mereka sesegera mungkin untuk menghindari kehilangan data.

Rencana Penghentian Penggunaan | Pelacak Chromestatus | Bug Chromium