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

Philip Walton

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

ה-API הזה יושם בשנת 2009, וכל המידע השימושי שהוא מדווח עליו נמצא בממשקי API סטנדרטיים כמו:

• Navigation Timing 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	Navigation Timing 2
startLoadTime	Navigation Timing 2
commitLoadTime	Navigation Timing 2
finishDocumentLoadTime	Navigation Timing 2
finishLoadTime	Navigation Timing 2
firstPaintTime	Paint Timing
firstPaintAfterLoadTime	לא רלוונטי
navigationType	Navigation Timing 2
wasFetchedViaSpdy	Navigation Timing 2
wasNpnNegotiated	Navigation Timing 2
npnNegotiatedProtocol	Navigation Timing 2
wasAlternateProtocolAvailable	לא רלוונטי
connectionInfo	Navigation Timing 2

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

דוגמאות הקוד הבאות מחזירות ערכים מקבילים לאלה שמוחזרים על ידי 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;
  }
}

תוכנית ההסרה

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

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