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:
- Waktu Navigasi 2
- Waktu Paint
- Penambahan
nextHopProtocol
ke Navigation Timing 2 dan Resource Timing 2.
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;
}
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;
}
}
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