PerformanceElementTiming: renderTime property

Giá trị

Một DOMHighResTimeStamp với thời gian render của phần tử.

Đối với hình ảnh, đây sẽ là dấu thời gian render hình ảnh. Được định nghĩa là lần vẽ tiếp theo xảy ra sau khi hình ảnh được tải đầy đủ. Nếu kiểm tra cho phép thời gian thất bại (như được định nghĩa bởi tiêu đề Timing-allow-origin), giá trị này sẽ trả về 0.

Đối với các nút văn bản, đây sẽ là dấu thời gian render văn bản. Được định nghĩa là thời điểm phần tử được vẽ văn bản.

Ví dụ

Ghi lại renderTime

Trong ví dụ này, một phần tử <img> đang được quan sát bằng cách thêm thuộc tính elementtiming. Một PerformanceObserver được đăng ký để lấy tất cả các mục hiệu suất loại "element" và cờ buffered được dùng để truy cập dữ liệu từ trước khi trình quan sát được tạo. Gọi entry.renderTime trả về thời gian render của phần tử hình ảnh.

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

Thời gian render hình ảnh từ nguồn khác

Vì lý do bảo mật, giá trị của thuộc tính renderTime ban đầu là 0 nếu tài nguyên là một yêu cầu từ nguồn khác (cross-origin). Thay vào đó, thuộc tính loadTime nên được sử dụng như một dự phòng.

Các trình duyệt hiện có thể hiển thị một thời gian render hơi thô hơn trong các tình huống này. Kiểm tra hỗ trợ trình duyệt.

Để hiển thị thông tin thời gian render cross-origin chính xác hơn, tiêu đề HTTP phản hồi Timing-Allow-Origin cần được đặt.

Ví dụ, để cho phép https://mdn.go-mizu.dev xem renderTime chính xác, tài nguyên cross-origin phải gửi:

Timing-Allow-Origin: https://mdn.go-mizu.dev

Ngoài ra, bạn có thể sử dụng startTime trả về giá trị renderTime của mục nếu nó không phải 0, và nếu không thì giá trị loadTime của mục này. Tuy nhiên, khuyến nghị đặt tiêu đề Timing-Allow-Origin để các chỉ số sẽ chính xác hơn.

Nếu bạn sử dụng startTime, bạn có thể đánh dấu bất kỳ sự không chính xác nào bằng cách kiểm tra xem renderTime có được sử dụng không:

const isRenderTime = Boolean(entry.renderTime);

Thông số kỹ thuật

Tương thích trình duyệt