chrome.loadTimes()
, yükleme metriklerini ve
daha iyi anlamalarına yardımcı olmak için geliştiricilerin ağ bilgilerini
nasıl performans gösterdiğini
anlamanızı sağlar.
Bu API 2009'da kullanıma sunulduğundan bu yana, raporladığı tüm yararlı bilgiler standart hale getirilmiş API'lerde bulunur. Örneğin:
- Navigasyon Zamanlaması 2
- Boya Zamanlaması
nextHopProtocol
Gezinme Zamanlaması 2'ye ek olarak Kaynak Zamanlaması 2.
Bu standartlaştırılmış API'ler, birden fazla tarayıcı tedarikçi firması tarafından uygulanmaktadır. Kullanıcı
Bunun sonucunda chrome.loadTimes()
, Chrome 64 sürümünde kullanımdan kaldırılıyor.
Kullanımdan kaldırılan API
chrome.loadTimes()
işlevi, tüm özelliklerini içeren tek bir nesne döndürür.
ve ağ bilgilerini yükleyin. Örneğin, aşağıdaki nesne,
www.google.com adresinden chrome.loadTimes()
numaralı telefonu arama:
{
"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"
}
Standart değişimler
Artık standartlaştırılmış API'leri kullanarak yukarıdaki değerlerin her birini bulabilirsiniz. Aşağıdakiler tablo, her bir değeri standart API ile eşleştirir ve aşağıdaki bölümler, her değerin modern eşdeğerleriyle eski API'de nasıl alınacağını gösteren kod örnekleri
chrome.loadTimes() özellik
| Standart API değişimi |
---|---|
requestTime |
Navigasyon Zamanlaması 2 'nı inceleyin. |
startLoadTime |
Navigasyon Zamanlaması 2 'nı inceleyin. |
commitLoadTime |
Navigasyon Zamanlaması 2 'nı inceleyin. |
finishDocumentLoadTime |
Navigasyon Zamanlaması 2 'nı inceleyin. |
finishLoadTime |
Navigasyon Zamanlaması 2 'nı inceleyin. |
firstPaintTime |
Boya Zamanlaması 'nı inceleyin. |
firstPaintAfterLoadTime |
Yok |
navigationType |
Navigasyon Zamanlaması 2 'nı inceleyin. |
wasFetchedViaSpdy |
Navigasyon Zamanlaması 2 'nı inceleyin. |
wasNpnNegotiated |
Navigasyon Zamanlaması 2 'nı inceleyin. |
npnNegotiatedProtocol |
Navigasyon Zamanlaması 2 'nı inceleyin. |
wasAlternateProtocolAvailable |
Yok |
connectionInfo |
Navigasyon Zamanlaması 2 'nı inceleyin. |
Aşağıdaki kod örnekleri,
chrome.loadTimes()
Ancak, yeni kod için bu kod örnekleri
önerilir. Bunun nedeni, chrome.loadTimes()
değerinin dönem zamanı olarak çarpma değerlerini saniye cinsinden, yeni performans API'leri ise saniye cinsinden vermesidir.
genellikle bir sayfanın
saat kaynağı,
performans analizinde daha faydalı olacağını düşünüyor.
Bazı örneklerde Performans Zaman Çizelgesi 2 API'leri de (ör.
performance.getEntriesByType()
), ancak daha eskiler için yedekler sağlar
Gezinme Timing 1 API'sinde
tarayıcı desteğini gönderin. Bundan sonra Performans Zaman Çizelgesi API'leri tercih edilir.
ve genellikle daha yüksek doğruluk oranıyla
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'sinin desteği, Chrome 64'te sonlandırılacak ve şu hedefte:
2018'in sonlarında kaldırıldı. Geliştiriciler kodlarını en kısa zamanda taşımalıdır
.
Kullanımdan Kaldırma Amacı | ChromeDurum İzleyici | Chromium Hatası