Chrome 64'te chrome.loadTimes() API'nin kullanımdan kaldırılması

Philip Walton

chrome.loadTimes(), web sitelerinin gerçek dünyadaki performansını daha iyi anlamalarına yardımcı olmak için geliştiricilere yükleme metriklerini ve ağ bilgilerini gösteren standart olmayan bir API'dir.

Bu API 2009'da uygulandığından, raporladığı tüm yararlı bilgiler aşağıdaki gibi standartlaştırılmış API'lerde bulunabilir:

Bu standartlaştırılmış API'ler birden fazla tarayıcı tedarikçisi tarafından uygulanmaktadır. Sonuç olarak, chrome.loadTimes() desteği Chrome 64'te sonlandı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"
}

Standart hale getirilmiş ikameler

Artık standartlaştırılmış API'leri kullanarak yukarıdaki değerlerin her birini bulabilirsiniz. Aşağıdaki tabloda her değer standartlaştırılmış API'siyle eşleştirilmiştir. Aşağıdaki bölümlerde ise eski API'deki her 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 Boya 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ülenlerle eşdeğer değerler döndürür. Ancak, yeni kodlar için bu kod örnekleri önerilmez. Bunun nedeni, chrome.loadTimes()'ün saniye cinsinden dönem zamanı değerleri vermesi, yeni performans API'lerinin ise genellikle bir sayfanın zaman kaynağına göre milisaniye cinsinden değerler raporlamasıdır. Bu değerler, performans analizi için daha yararlı olma eğilimindedir.

Örneklerin birçoğu Performans Zaman Çizelgesi 2 API'lerini (ör. performance.getEntriesByType()) tercih eder ancak daha geniş tarayıcı desteğine sahip olduğu için eski Navigation Timing 1 API'si için yedek seçenekler sunar. Bundan sonra Performans Zaman Çizelgesi API'leri tercih edilir ve genellikle daha yüksek doğrulukla 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;
}

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 sürümünde kullanımdan kaldırılacaktır ve 2018'in sonlarında kaldırılması hedeflenmektedir. Geliştiriciler, veri kaybı yaşamamak için kodlarını en kısa sürede taşımalıdır.

Desteği sonlandırma planı | Chromestatus İzleyici | Chromium Hatası