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