PerformancePaintTiming

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

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

PerformancePaintTiming.paintTime

Trả về timestamp khi giai đoạn rendering kết thúc và giai đoạn paint bắt đầu.

PerformancePaintTiming.presentationTime

Trả về timestamp khi các pixel đã paint thực sự được vẽ lên màn hình.

Nó cũng mở rộng các thuộc tính PerformanceEntry sau, đủ điều kiện và ràng buộc chúng như được mô tả:

PerformanceEntry.entryType

Trả về "paint".

PerformanceEntry.name

Trả về "first-paint" hoặc "first-contentful-paint".

PerformanceEntry.startTime

Trả về timestamp khi quá trình paint xảy ra.

PerformanceEntry.duration

Trả về 0.

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

PerformancePaintTiming.toJSON()

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

Ví dụ

Lấy thời gian paint cơ bản

Ví dụ sử dụng PerformanceObserver, thông báo về các mục hiệu suất paint mới khi chúng được ghi lại trong timeline hiệu suất của trình duyệt. Sử dụng tùy chọn buffered để truy cập các mục trước khi observer được tạo.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

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

Ví dụ sử dụng Performance.getEntriesByType(), chỉ hiển thị các mục hiệu suất paint có trong timeline hiệu suất của trình duyệt tại thời điểm bạn gọi phương thức này:

const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
  // Logs "The time to first-paint was 386.7999999523163 milliseconds."
  // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});

Lấy thời gian paint và presentation riêng biệt

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

Ví dụ này dựa trên ví dụ Performance.getEntriesByType() trước đó, cho thấy cách kiểm tra hỗ trợ paintTime và presentationTime và lấy các giá trị đó nếu chúng có sẵn. Trong các trình duyệt không hỗ trợ, code lấy loadTime.

const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  if (entry.presentationTime) {
    console.log(
      "paintTime:",
      entry.paintTime,
      "presentationTime:",
      entry.presentationTime,
    );
  } else if (entry.paintTime) {
    console.log("paintTime:", entry.paintTime);
  } else {
    console.log("loadTime", entry.loadTime);
  }
});

Thông số kỹ thuật

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

Xem thêm

• LargestContentfulPaint