chrome.loadTimes()
یک API غیر استاندارد است که معیارهای بارگیری و اطلاعات شبکه را در اختیار توسعه دهندگان قرار می دهد تا به آنها کمک کند عملکرد سایت خود را در دنیای واقعی بهتر درک کنند.
از آنجایی که این API در سال 2009 پیادهسازی شد، تمام اطلاعات مفیدی که گزارش میکند را میتوان در APIهای استاندارد شده یافت، مانند:
- زمان بندی ناوبری 2
- زمان رنگ آمیزی
-
nextHopProtocol
اضافه شده به Navigation Timing 2 و Resource Timeming 2 .
این APIهای استاندارد شده توسط چندین فروشنده مرورگر پیاده سازی می شوند. در نتیجه، chrome.loadTimes()
در Chrome 64 منسوخ شده است.
API منسوخ شده
تابع chrome.loadTimes()
یک شی منفرد حاوی تمام اطلاعات بارگیری و شبکه آن را برمی گرداند. به عنوان مثال، شی زیر نتیجه فراخوانی chrome.loadTimes()
در 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"
}
جایگزین های استاندارد
اکنون می توانید هر یک از مقادیر بالا را با استفاده از API های استاندارد شده بیابید. جدول زیر هر مقدار را با API استاندارد آن مطابقت میدهد، و بخشهای زیر نمونههای کدی را نشان میدهند که چگونه میتوان هر مقدار را در API قدیمی با معادلهای مدرن دریافت کرد.
ویژگی chrome.loadTimes() | جایگزینی استاندارد API |
---|---|
requestTime | زمان بندی ناوبری 2 |
startLoadTime | زمان بندی ناوبری 2 |
commitLoadTime | زمان بندی ناوبری 2 |
finishDocumentLoadTime | زمان بندی ناوبری 2 |
finishLoadTime | زمان بندی ناوبری 2 |
firstPaintTime | زمان رنگ آمیزی |
firstPaintAfterLoadTime | N/A |
navigationType | زمان بندی ناوبری 2 |
wasFetchedViaSpdy | زمان بندی ناوبری 2 |
wasNpnNegotiated | زمان بندی ناوبری 2 |
npnNegotiatedProtocol | زمان بندی ناوبری 2 |
wasAlternateProtocolAvailable | N/A |
connectionInfo | زمان بندی ناوبری 2 |
نمونههای کد زیر مقادیری معادل با مقادیر بازگردانده شده توسط chrome.loadTimes()
برمیگردانند. با این حال، برای کد جدید، این نمونه کد توصیه نمی شود. دلیل آن این است که chrome.loadTimes()
مقادیر بار را در زمان دوره در ثانیه می دهد در حالی که APIهای عملکرد جدید معمولاً مقادیر را در میلی ثانیه نسبت به مبدا زمانی صفحه گزارش می دهند که برای تجزیه و تحلیل عملکرد مفیدتر است.
چندین نمونه از APIهای Performance Timeline 2 (مثلا performance.getEntriesByType()
) حمایت میکنند، اما برای API قدیمیتر Navigation Timing 1 به دلیل پشتیبانی گستردهتری از مرورگر، مواردی را ارائه میدهند. در آینده، 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 حذف شود. توسعه دهندگان باید کد خود را در اسرع وقت انتقال دهند تا از هدر رفتن داده جلوگیری شود.