PerformanceResourceTiming: renderBlockingStatus property

Mô tả

Tài nguyên chặn kết xuất là các tệp tĩnh, chẳng hạn như font, CSS và JavaScript, làm chặn hoặc trì hoãn trình duyệt hiển thị nội dung trang lên màn hình. Trình duyệt tự động xác định các tài nguyên chặn này và không hiển thị bất kỳ pixel nào lên màn hình trước khi tất cả stylesheet và script đồng bộ được tải và đánh giá. Điều này ngăn Flash of Unstyled Contents ("FOUC").

Ngoài cơ chế chặn kết xuất tự động, thuộc tính và giá trị blocking="render" có thể được cung cấp cho các phần tử <script>, <style> hoặc <link> để chỉ định chặn kết xuất tường minh. Ví dụ:

<script blocking="render" src="important.js" defer></script>

Giá trị

Thuộc tính renderBlockingStatus có thể có các giá trị sau:

"blocking"

Tài nguyên có thể chặn kết xuất.

"non-blocking"

Tài nguyên không chặn kết xuất.

Ví dụ

Ghi nhật ký các tài nguyên chặn kết xuất

Thuộc tính renderBlockingStatus có thể dùng để xem các tài nguyên chặn kết xuất.

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) => {
    if (entry.renderBlockingStatus === "blocking") {
      console.log(`${entry.name} is render-blocking.`);
    }
  });
});

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) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});

Thông số kỹ thuật

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