PerformanceResourceTiming: fetchStart property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Note: This feature is available in Web Workers.

Thuộc tính chỉ đọc fetchStart biểu thị timestamp ngay trước khi trình duyệt bắt đầu tìm nạp tài nguyên.

Nếu có chuyển hướng HTTP, thuộc tính này trả về thời điểm ngay trước khi user agent bắt đầu tìm nạp tài nguyên cuối cùng trong chuỗi chuyển hướng.

Không giống nhiều thuộc tính khác của PerformanceResourceTiming, thuộc tính fetchStart có sẵn cho các yêu cầu cross-origin mà không cần tiêu đề phản hồi HTTP Timing-Allow-Origin.

Giá trị

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu tìm nạp tài nguyên.

Các thuộc tính fetchStart và responseEnd có thể dùng để đo tổng thời gian cần để tìm nạp tài nguyên cuối cùng (không tính chuyển hướng). Nếu muốn bao gồm chuyển hướng, tổng thời gian tìm nạp được cung cấp trong thuộc tính duration.

const timeToFetch = entry.responseEnd - entry.fetchStart;

Ví dụ dùng PerformanceObserver, thông báo các performance entry resource mới khi chúng được ghi trong performance timeline của trình duyệt. Dùng tùy chọn buffered để truy cập các entry từ trước khi observer được tạo.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Ví dụ dùng Performance.getEntriesByType(), chỉ hiển thị các performance entry resource đang có trong performance timeline tại thời điểm bạn gọi phương thức này:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});