chrome.loadTimes()
は、読み込みに関する指標を公開する非標準 API です。
ネットワーク情報をデベロッパーに提供します。
サイトのパフォーマンスを評価できます
この API は 2009 年に実装されたため、レポートされるすべての有用な情報を 次のような標準化された API にあります。
- ナビゲーションのタイミング 2
- 塗装のタイミング
nextHopProtocol
Navigation Timing 2 と Resource Timing 2。
これらの標準化された API は、複数のブラウザ ベンダーによって実装されています。たとえば、
chrome.loadTimes()
のサポートは Chrome 64 で終了します。
非推奨の API
chrome.loadTimes()
関数は、そのすべてのトークンを含む 1 つのオブジェクトを返します。
ネットワーク情報を記録します。たとえば、次のオブジェクトの結果は、
www.google.com で chrome.loadTimes()
を呼び出す場合:
{
"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"
}
標準化された交換
これで、標準化された API を使用して上記の各値を見つけられるようになりました。次の 表で、各値と標準化された API を対応付けています。以下のセクションでは、 古い API の各値を最新の同等の機能に置き換えるコードサンプル
chrome.loadTimes() 個の機能
| 標準化された API の置き換え |
---|---|
requestTime |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
startLoadTime |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
commitLoadTime |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
finishDocumentLoadTime |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
finishLoadTime |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
firstPaintTime |
<ph type="x-smartling-placeholder"></ph> 塗装のタイミング |
firstPaintAfterLoadTime |
なし |
navigationType |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
wasFetchedViaSpdy |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
wasNpnNegotiated |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
npnNegotiatedProtocol |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
wasAlternateProtocolAvailable |
なし |
connectionInfo |
<ph type="x-smartling-placeholder"></ph> ナビゲーションのタイミング 2 |
以下のコード例は、
chrome.loadTimes()
。新しいコードの場合、これらのコードサンプルは
推奨されます。これは、chrome.loadTimes()
がエポックタイムの値を秒単位で指定するのに対し、新しいパフォーマンス API は
レポートは通常、ページのリクエストに対する
時系列の起源は、次の傾向が
パフォーマンス分析に役立ちます
また、いくつかのサンプルでは Performance Timeline 2 API が推奨されています(例:
performance.getEntriesByType()
など)ですが、古いバージョンのコンテナには、
既存の Navigation Timing 1 API
ブラウザのサポートが広がりました。今後は、Performance Timeline API を使用することをおすすめします。
通常は高い精度でレポートされます
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;
}
}
削除プラン
chrome.loadTimes()
API は Chrome 64 でサポートが終了し、
2018 年末に削除されましたデベロッパーはできるだけ早くコードを移行する必要があります
データ損失を防止できます