Chrome 64 יוצא משימוש של chrome.loadTimes() API

פיליפ וולטון

Twitter GitHub דף הבית

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	תזמון המרת תמונה וקטורית למפת סיביות (painting)
firstPaintAfterLoadTime	לא רלוונטי
navigationType	תזמון ניווט 2
wasFetchedViaSpdy	תזמון ניווט 2
wasNpnNegotiated	תזמון ניווט 2
npnNegotiatedProtocol	תזמון ניווט 2
wasAlternateProtocolAvailable	לא רלוונטי
connectionInfo	תזמון ניווט 2

הערה: חלק מהתכונות של ה-API המקורי מעולם לא הוטמעו, או שהן חלות רק על תכונות שהוצאו משימוש. הערכים האלה מסומנים כ-'לא רלוונטי' בטבלה שלמעלה.

דוגמאות הקוד שבהמשך מחזירות ערכים שווי ערך לאלו שהוחזרו על ידי chrome.loadTimes(). עם זאת, בקוד חדש לא מומלץ להשתמש בדוגמאות האלו. הסיבה לכך היא ש-chrome.loadTimes() מציין לזמנים של זמן מערכת בשניות, ואילו ממשקי API חדשים של ביצועים מדווחים בדרך כלל על ערכים באלפיות שנייה ביחס למקור הזמן של הדף. בדרך כלל הנתונים האלו שימושיים יותר בניתוח הביצועים.

בחלק מהדוגמאות יש גם תמיכה ב-Performance Schedule 2 APIs (למשל, performance.getEntriesByType()), אבל הן מספקות חלופות ל-API הישן API של תזמון 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. המפתחים צריכים להעביר את הקוד שלהם בהקדם האפשרי כדי למנוע אובדן נתונים.

כוונת הוצאה משימוש | מעקב אחר הסטטוס של Chrome | באג ב-Chromium