PerformanceResourceTiming: responseEnd 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 responseEnd trả về timestamp ngay sau khi trình duyệt nhận byte cuối cùng của tài nguyên hoặc ngay trước khi kết nối vận chuyển bị đóng, tùy điều kiện nào đến trước.

Không giống nhiều thuộc tính khác của PerformanceResourceTiming, thuộc tính responseEnd 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 sau khi trình duyệt nhận byte cuối cùng của tài nguyên hoặc ngay trước khi kết nối vận chuyển bị đóng, tùy điều kiện nào đến trước.

Các thuộc tính responseEnd và fetchStart 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 cả 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`);
  }
});