Chrome 64 sẽ ngừng sử dụng API chrome.loadTimes()

Philip Walton

Twitter GitHub Trang chủ

chrome.loadTimes() là một API không chuẩn, hiển thị các chỉ số tải và thông tin mạng cho nhà phát triển để giúp họ hiểu rõ hơn về hiệu suất trang web của họ trong thực tế.

Kể từ khi API này được triển khai vào năm 2009, bạn có thể tìm thấy tất cả thông tin hữu ích mà API này báo cáo trong các API được chuẩn hoá, chẳng hạn như:

• Thời gian điều hướng 2
• Thời gian vẽ
• Bổ sung nextHopProtocol vào Navigation Timing 2 và Resource Timing 2.

Nhiều nhà cung cấp trình duyệt đang triển khai những API đã chuẩn hoá này. Do đó, chrome.loadTimes() không được dùng trong Chrome 64 nữa.

API không dùng nữa

Hàm chrome.loadTimes() trả về một đối tượng duy nhất chứa tất cả thông tin mạng và dữ liệu tải. Ví dụ: đối tượng sau đây là kết quả của lệnh gọi chrome.loadTimes() trên 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"
}

Thay thế được tiêu chuẩn hoá

Giờ đây, bạn có thể tìm thấy từng giá trị trên bằng API đã chuẩn hoá. Bảng sau đây so khớp từng giá trị với API đã chuẩn hoá tương ứng. Các phần dưới đây cho thấy ví dụ về mã về cách lấy từng giá trị trong API cũ với các giá trị tương đương hiện đại.

Tính năng chrome.loadTimes()	Thay thế API được tiêu chuẩn hoá
requestTime	Thời gian điều hướng 2
startLoadTime	Thời gian điều hướng 2
commitLoadTime	Thời gian điều hướng 2
finishDocumentLoadTime	Thời gian điều hướng 2
finishLoadTime	Thời gian điều hướng 2
firstPaintTime	Thời gian hiển thị
firstPaintAfterLoadTime	Không áp dụng
navigationType	Thời gian điều hướng 2
wasFetchedViaSpdy	Thời gian điều hướng 2
wasNpnNegotiated	Thời gian điều hướng 2
npnNegotiatedProtocol	Thời gian điều hướng 2
wasAlternateProtocolAvailable	Không áp dụng
connectionInfo	Thời gian điều hướng 2

Lưu ý: Một số tính năng của API gốc chưa bao giờ được triển khai hoặc chỉ áp dụng cho các tính năng không dùng nữa. Những chỉ số này được đánh dấu là "Không áp dụng" trong bảng trên.

Các ví dụ về mã bên dưới trả về các giá trị tương đương với các giá trị do chrome.loadTimes() trả về. Tuy nhiên, đối với mã mới, bạn không nên dùng các ví dụ về mã này. Lý do là chrome.loadTimes() cung cấp các giá trị cho thời gian theo thời gian bắt đầu của hệ thống tính bằng giây trong khi các API hiệu suất mới thường báo cáo các giá trị theo mili giây so với nguồn gốc thời gian của trang. Thông tin này có xu hướng hữu ích hơn cho việc phân tích hiệu suất.

Một số ví dụ cũng ưu tiên các API Performance Dòng thời gian 2 (ví dụ: performance.getEntriesByType()) nhưng cung cấp tính năng dự phòng cho API Navigation Timing 1 cũ vì API này hỗ trợ trình duyệt rộng hơn. Từ giờ trở đi, API Dòng thời gian hiệu suất sẽ được ưu tiên và thường được báo cáo với độ chính xác cao hơn.

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;
  }
}

Kế hoạch xoá

API chrome.loadTimes() sẽ không còn được dùng trong Chrome 64 và dự kiến sẽ bị loại bỏ vào cuối năm 2018. Nhà phát triển nên di chuyển mã sớm nhất có thể để tránh mất dữ liệu.

Ý định không dùng nữa | Công cụ theo dõi trạng thái Chrome | Lỗi Chromium