Chrome 64 เพื่อเลิกใช้งาน chrome.loadTimes() API

Philip Walton

Twitter GitHub หน้าแรก

chrome.loadTimes() คือ API ที่ไม่ใช่แบบมาตรฐานซึ่งจะแสดงเมตริกการโหลดและข้อมูลเครือข่ายแก่นักพัฒนาซอฟต์แวร์ เพื่อช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจประสิทธิภาพของเว็บไซต์ในชีวิตจริงได้ดีขึ้น

ตั้งแต่มีการใช้งาน API นี้ในปี 2009 ข้อมูลที่เป็นประโยชน์ทั้งหมดที่ API รายงานจะพบได้ใน API มาตรฐาน เช่น

• กรอบเวลาการนำทาง 2
• เวลาลงสี
• การเพิ่ม nextHopProtocol นอกเหนือจาก Navigation Timing 2 และ Resource Timing 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	ระยะเวลาการแสดงผล
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() จะแสดงค่าเวลาเป็น Epoch Time ในหน่วยวินาที ขณะที่ API ประสิทธิภาพใหม่มักจะเป็นค่ารายงานในหน่วยมิลลิวินาทีที่สัมพันธ์กับต้นทางเวลาของหน้าเว็บ ซึ่งมีแนวโน้มที่จะเป็นประโยชน์มากกว่าสําหรับการวิเคราะห์ประสิทธิภาพ

ตัวอย่างจำนวนมากยังชื่นชอบ API ไทม์ไลน์ประสิทธิภาพ 2 (เช่น performance.getEntriesByType()) แต่ใช้ API สำรองสําหรับ API Navigation Timing 1 เวอร์ชันเก่า เนื่องจากมีการรองรับเบราว์เซอร์ที่กว้างกว่า แต่นับจากนี้ไป 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 นักพัฒนาซอฟต์แวร์ควรย้ายโค้ดโดยเร็วที่สุดเพื่อป้องกันไม่ให้ข้อมูลสูญหาย

ความตั้งใจที่จะเลิกใช้งาน | ตัวติดตาม Chromestatus | ข้อบกพร่อง Chromium