chrome.loadTimes()
, sitelerinin gerçek dünyadaki performansını daha iyi anlamalarına yardımcı olmak için yükleme metriklerini ve ağ bilgilerini geliştiricilere gösteren, standart dışı bir API'dir.
Bu API 2009'da uygulandığından beri raporladığı faydalı bilgilerin tümü, aşağıdaki gibi standartlaştırılmış API'lerde bulunabilir:
- Gezinme Zamanlaması 2
- Boya Zamanlaması
- Gezinme Zamanlaması 2 ve Kaynak Zamanlaması 2'ye
nextHopProtocol
eklemesi.
Bu standartlaştırılmış API'ler, birden fazla tarayıcı tedarikçisi tarafından uygulanmaktadır. Bu nedenle chrome.loadTimes()
, Chrome 64'te kullanımdan kaldırılıyor.
Kullanımdan kaldırılan API
chrome.loadTimes()
işlevi, tüm yükleme ve ağ bilgilerini içeren tek bir nesne döndürür. Örneğin, aşağıdaki nesne www.google.com adresinde chrome.loadTimes()
çağrısının sonucudur:
{
"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"
}
Standartlaştırılmış değişim işlemleri
Artık standartlaştırılmış API'leri kullanarak yukarıdaki değerlerin her birini bulabilirsiniz. Aşağıdaki tablo her bir değeri standartlaştırılmış API'siyle eşleştirir. Aşağıdaki bölümlerde, eski API'de her bir değerin modern eşdeğerleriyle nasıl alınacağına dair kod örnekleri gösterilmektedir.
chrome.loadTimes() özellik
| Standartlaştırılmış API değişimi |
---|---|
requestTime |
Gezinme Zamanlaması 2 |
startLoadTime |
Gezinme Zamanlaması 2 |
commitLoadTime |
Gezinme Zamanlaması 2 |
finishDocumentLoadTime |
Gezinme Zamanlaması 2 |
finishLoadTime |
Gezinme Zamanlaması 2 |
firstPaintTime |
Boyama Zamanlaması |
firstPaintAfterLoadTime |
Yok |
navigationType |
Gezinme Zamanlaması 2 |
wasFetchedViaSpdy |
Gezinme Zamanlaması 2 |
wasNpnNegotiated |
Gezinme Zamanlaması 2 |
npnNegotiatedProtocol |
Gezinme Zamanlaması 2 |
wasAlternateProtocolAvailable |
Yok |
connectionInfo |
Gezinme Zamanlaması 2 |
Aşağıdaki kod örnekleri, chrome.loadTimes()
tarafından döndürülen değerlere eşdeğer değerler döndürür. Bununla birlikte, yeni kod için bu kod örnekleri önerilmez. Bunun nedeni, chrome.loadTimes()
ürününün sıfır zaman cinsinden zaman değerlerini saniye cinsinden vermesidir. Yeni performans API'leri ise genellikle sayfanın zaman kaynağına göre değerleri milisaniye cinsinden raporlar. Bu da performans analizi için daha yararlı olur.
Örneklerin birkaçında Performance Timeline 2 API'leri de (ör. performance.getEntriesByType()
) iyileştirilir ancak daha geniş tarayıcı desteğine sahip olduğundan eski Navigation Timing 1 API'nin yedekleri sağlanır. Bundan sonra Performans Zaman Çizelgesi API'leri tercih edilir ve genellikle daha yüksek hassasiyetle raporlanır.
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;
}
}
Kaldırma planı
chrome.loadTimes()
API, Chrome 64'te kullanımdan kaldırılacak ve 2018'in sonlarında kaldırılması planlanmaktadır. Veri kaybı yaşamamak için geliştiricilerin en kısa sürede kodlarını taşıması gerekir.
Kullanımdan Kaldırma Amacı | Chromestatus Tracker | Chromium Bug