PerformanceResourceTiming: renderBlockingStatus 属性

renderBlockingStatus 只读属性返回资源的渲染阻塞状态。

它有助于确定

  • 未被渲染阻塞的资源，因此可以延迟加载，或者
  • 被渲染阻塞的资源，因此可以预加载。

描述

渲染阻塞资源是静态文件，例如字体、CSS 和 JavaScript，它们会阻止或延迟浏览器将页面内容渲染到屏幕上。 浏览器会自动确定这些阻塞资源，并且在所有样式表和同步脚本加载并评估之前不会渲染任何像素到屏幕上。 这可以防止无样式内容闪烁（“FOUC”）。

除了自动渲染阻塞机制之外，还可以将 blocking="render" 作为属性和值提供给 <script>、<style> 或 <link> 元素以指定显式渲染阻塞。 例如

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

值

renderBlockingStatus 属性可以具有以下值

"blocking"

资源可能潜在阻塞渲染。

"non-blocking"

资源不会阻塞渲染。

示例

记录阻塞渲染的资源

renderBlockingStatus 属性可用于查看阻塞渲染的资源。

使用 PerformanceObserver 的示例，它会在浏览器性能时间轴中记录新的 resource 性能条目时发出通知。 使用 buffered 选项访问观察者创建之前的条目。

js
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 });

使用 Performance.getEntriesByType() 的示例，它只显示浏览器性能时间轴中在您调用此方法时存在的 resource 性能条目

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});

规范

规范
资源计时
# dom-performanceresourcetiming-renderblockingstatus

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。