chrome.loadTimes()
הוא API לא סטנדרטי שחושף מדדי טעינה
רשת מידע למפתחים, כדי לעזור להם להבין טוב יותר
את ביצועי האתר בעולם האמיתי.
מכיוון שה-API הזה הוטמע בשנת 2009, כל המידע המועיל שהוא מדווח בו יכול נמצאים בממשקי API סטנדרטיים כמו:
- תזמון ניווט 2
- תזמון צביעה
nextHopProtocol
נוסף לתזמון ניווט 2 וגם תזמון משאב 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 |
לא רלוונטי |
navigationType |
תזמון ניווט 2 |
wasFetchedViaSpdy |
תזמון ניווט 2 |
wasNpnNegotiated |
תזמון ניווט 2 |
npnNegotiatedProtocol |
תזמון ניווט 2 |
wasAlternateProtocolAvailable |
לא רלוונטי |
connectionInfo |
תזמון ניווט 2 |
דוגמאות הקוד שבהמשך מחזירות ערכים מקבילים לאלה שהוחזרו על ידי
chrome.loadTimes()
עם זאת, עבור קוד חדש, דוגמאות הקוד האלה
מומלץ. הסיבה לכך היא ש-chrome.loadTimes()
מספק ערכים לזמנים בתקופה של זמן בשניות, ואילו ממשקי API חדשים לביצועים
בדרך כלל מדווחים על ערכים באלפיות השנייה ביחס
מקור זמן, בדרך כלל
להיות שימושי יותר לניתוח הביצועים.
חלק מהדוגמאות גם נותנות עדיפות לממשקי API של ציר הזמן 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;
}
}
תוכנית להסרה
ה-API של chrome.loadTimes()
יצא משימוש ב-Chrome 64, והוא נועד להיות
הוסרה בסוף 2018. מפתחים צריכים להעביר את הקוד שלהם בהקדם האפשרי
כדי למנוע אובדן נתונים.