PerformanceNavigationTiming: domContentLoadedEventEnd property

Baseline Widely available

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

Thuộc tính chỉ đọc domContentLoadedEventEnd trả về một DOMHighResTimeStamp biểu thị thời điểm ngay sau khi trình xử lý sự kiện DOMContentLoaded của tài liệu hiện tại hoàn tất.

Thông thường framework và thư viện sẽ đợi sự kiện DOMContentLoaded trước khi bắt đầu chạy mã của họ. Chúng ta có thể dùng các thuộc tính domContentLoadedEventEnd và domContentLoadedEventStart để tính khoảng thời gian thực thi.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const domContentLoadedTime =
      entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
    console.log(
      `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
    );
  });
});

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

Ví dụ dùng Performance.getEntriesByType():

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const domContentLoadedTime =
    entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
  console.log(
    `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
  );
});