PerformanceResourceTiming: renderBlockingStatus 属性
注意：此功能在 Web Workers 中可用。
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 |
浏览器兼容性
加载中…