blocking="render" | Frontend Practical Guide

Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`blocking`	105	105		18.2	105	18.2
HTML 属性
`blocking`	105	105		18.2	105	18.2
`blocking`	105	105		18.2	105	18.2
`blocking`	105	105		18.2	105	18.2
DOM API
`blocking` blocking は HTMLScriptElement インターフェイスのプロパティで、スクリプトを取得する際に特定の操作を実行しないことを示す文字列です。	105	105		18.2	105	18.2
`blocking` HTMLStyleElement の読み取り専用の blocking プロパティは、外部リソースの取得時にブロックされるべき操作を含むライブ DOMTokenList オブジェクトを返します。これは、style 要素の blocking コンテンツ属性を反映します。	105	105		18.2	105	18.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

HTML

<link rel="stylesheet" href="critical.css" blocking="render">
<script src="init.js" blocking="render"></script>

The path from discovery in the head to first paint, and where blocking is decided.

List resources that truly affect first render and may justify blocking behavior.

Blocking more than necessary can delay paint and worsen perceived performance.

blocking="render" の活用

HTMLLinkElement の読み取り専用の blocking プロパティは、外部リソースのフェッチ時にブロックされるべき操作を含むライブ DOMTokenList オブジェクトを返します。