PerformanceElementTiming

Mô tả

Mục tiêu của Element Timing API là cung cấp cho các nhà phát triển web hoặc các công cụ phân tích khả năng đo các dấu thời gian render của các phần tử quan trọng trên một trang.

API hỗ trợ thông tin thời gian trên các phần tử sau:

• Các phần tử <img>,
• Các phần tử <image> bên trong <svg>,
• Hình ảnh poster của các phần tử <video>,
• Các phần tử có thuộc tính background-image chứa nội dung với giá trị URL cho tài nguyên thực sự có sẵn, và
• Các nhóm nút văn bản, chẳng hạn như <p>.

Tác giả đánh dấu một phần tử để quan sát bằng cách thêm thuộc tính elementtiming trên phần tử đó.

PerformanceElementTiming kế thừa từ PerformanceEntry.

Thuộc tính phiên bản

Giao diện này trực tiếp định nghĩa các thuộc tính sau:

PerformanceElementTiming.element Read only Experimental

Một Element đại diện cho phần tử mà chúng ta đang trả về thông tin.

PerformanceElementTiming.id Read only Experimental

Một chuỗi là id của phần tử.

PerformanceElementTiming.identifier Read only Experimental

Một chuỗi là giá trị của thuộc tính elementtiming trên phần tử.

PerformanceElementTiming.intersectionRect Read only Experimental

Một DOMRectReadOnly là hình chữ nhật của phần tử trong viewport.

PerformanceElementTiming.loadTime Read only Experimental

Một DOMHighResTimeStamp với loadTime của phần tử.

PerformanceElementTiming.naturalHeight Read only Experimental

Một số nguyên không dấu 32-bit (unsigned long) là chiều cao nội tại của hình ảnh nếu áp dụng cho hình ảnh, 0 cho văn bản.

PerformanceElementTiming.naturalWidth Read only Experimental

Một số nguyên không dấu 32-bit (unsigned long) là chiều rộng nội tại của hình ảnh nếu áp dụng cho hình ảnh, 0 cho văn bản.

PerformanceElementTiming.paintTime

Trả về dấu thời gian khi giai đoạn render kết thúc và giai đoạn vẽ bắt đầu.

PerformanceElementTiming.presentationTime

Trả về dấu thời gian khi phần tử thực sự được vẽ trên màn hình.

PerformanceElementTiming.renderTime Read only Experimental

Một DOMHighResTimeStamp với renderTime của phần tử.

PerformanceElementTiming.url Read only Experimental

Một chuỗi là URL ban đầu của yêu cầu tài nguyên cho hình ảnh, 0 cho văn bản.

Giao diện này cũng mở rộng các thuộc tính PerformanceEntry sau, với các điều kiện và hạn chế như được mô tả:

PerformanceEntry.duration Read only Experimental

Luôn trả về 0 vì duration không áp dụng cho giao diện này.

PerformanceEntry.entryType Read only Experimental

Luôn trả về "element".

PerformanceEntry.name Read only Experimental

Trả về "image-paint" cho hình ảnh và "text-paint" cho văn bản.

PerformanceEntry.startTime Read only Experimental

Trả về giá trị renderTime của mục này nếu nó không phải 0, nếu không trả về giá trị loadTime của mục này.

Phương thức phiên bản

PerformanceElementTiming.toJSON() Experimental

Trả về biểu diễn JSON của đối tượng PerformanceElementTiming.

Ví dụ

Quan sát thời gian render của các phần tử cụ thể

Trong ví dụ này, hai phần tử đ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.

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>

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

Hai mục sẽ được xuất ra console. Mục đầu tiên chứa thông tin chi tiết về hình ảnh, mục thứ hai chứa thông tin chi tiết về nút văn bản.

Quan sát thời gian vẽ và trình bày riêng biệt

Các thuộc tính paintTime và presentationTime cho phép bạn truy xuất các thời gian cụ thể cho thời điểm giai đoạn vẽ bắt đầu và phần tử được vẽ trên màn hình. paintTime có tính tương thích rộng rãi, trong khi presentationTime phụ thuộc vào từng triển khai cụ thể.

Ví dụ này sử dụng PerformanceObserver để quan sát tất cả các mục hiệu suất loại "element" (nhớ rằng, để được quan sát, các phần tử cần có thuộc tính elementtiming được đặt trên chúng). Chúng ta kiểm tra hỗ trợ paintTime và presentationTime và truy xuất các giá trị đó nếu có. Trong các trình duyệt không hỗ trợ, mã sẽ truy xuất renderTime hoặc loadTime, tùy thuộc vào cái nào được hỗ trợ.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (entry.presentationTime) {
      console.log(
        "Element paintTime:",
        entry.paintTime,
        "Element presentationTime:",
        entry.presentationTime,
      );
    } else if (entry.paintTime) {
      console.log("Element paintTime:", entry.paintTime);
    } else if (entry.renderTime) {
      console.log("Element renderTime:", entry.renderTime);
    } else {
      console.log("Element loadTime", entry.loadTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

Thông số kỹ thuật

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

Xem thêm

• Thuộc tính HTML elementtiming