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 |
瀏覽器相容性
載入中…