chrome.loadTimes()
adalah API non-standar yang mengekspos metrik pemuatan dan
informasi jaringan kepada pengembang untuk membantu mereka lebih memahami
performa situs di dunia nyata.
Karena API ini diimplementasikan pada tahun 2009, semua informasi berguna yang dilaporkan dapat yang ditemukan dalam API standar seperti:
- Waktu Navigasi 2
- Waktu Proses Cat
nextHopProtocol
tambahan ke Navigation Timing 2 dan Waktu Resource 2.
API standar ini diimplementasikan oleh banyak vendor browser. Sebagai seorang
hasil, chrome.loadTimes()
tidak digunakan lagi di Chrome 64.
API yang tidak digunakan lagi
Fungsi chrome.loadTimes()
menampilkan satu objek yang berisi semua
informasi jaringan dan pemuatan. Misalnya, objek berikut adalah hasil
panggilan 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. Hal berikut mencocokkan setiap nilai dengan API standarnya, dan bagian di bawah ini menampilkan contoh kode tentang 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 |
Waktu Pengecatan |
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 yang setara dengan nilai yang ditampilkan oleh
chrome.loadTimes()
. Namun, untuk kode baru,
contoh kode ini bukan
direkomendasikan. Alasannya adalah chrome.loadTimes()
memberikan nilai waktu dalam waktu epoch dalam detik sedangkan API performa baru
biasanya melaporkan nilai dalam milidetik dibandingkan dengan nilai
asal waktu, yang cenderung
lebih berguna untuk analisis performa.
Beberapa contoh juga mendukung API Performance Linimasa 2 (mis.
performance.getEntriesByType()
), tetapi memberikan penggantian untuk versi lama
Navigation Timing 1 API seperti yang dimiliki
dukungan browser yang lebih luas. Untuk ke depannya, Performance Linimasa API akan 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
pada akhir tahun 2018. Developer harus memigrasikan kode mereka sesegera mungkin
untuk menghindari
kehilangan data.
Rencana Penghentian Penggunaan | Pelacak Chromestatus | Bug Chromium