<script async defer></script>
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素 |
利用場所 | メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 |
内容 | src属性がある場合:空、またはスクリプトの説明(コメント) / src属性がない場合:JavaScriptのコード、またはデータブロック |
script要素に async
や defer
を追加すると、スクリプトの実行方法を指定することができます。
<script src="example.js" async defer></script>
属性 | 値 | ||
---|---|---|---|
任意属性 | |||
async |
利用可能な時点で実行 | (async ) |
値は省略可能、構文解析と並行して読み込み、スクリプトが利用可能になった時点で実行する |
defer |
読み込み完了後に実行 | (defer ) |
値は省略可能、構文解析と並行して読み込み、解析が完了した時点でスクリプトを実行する |
- 一般的なJavaScriptの場合は、src属性がある場合に限り、async属性とdefer属性を指定することができます。
- JavaScriptモジュールスクリプトの場合は、src属性の有無にかかわらずasync属性を指定することができます。しかし、defer属性は指定することができません。
- データブロックの場合は、async属性とdefer属性のどちらも指定することができません。
一般的なJavaScriptの場合は、async属性とdefer属性の有無により、次の3つのパターンで実行方法を指定することができます。
- どちらの属性も指定されていない場合
-
HTMLの構文解析を中断してスクリプトを読み込み、そのスクリプトが利用可能になった時点で実行されます。
<script src="example.js"></script>
- async属性が指定されている場合
-
HTMLの構文解析と並行してスクリプトを読み込み、そのスクリプトが利用可能になった時点で実行されます。
<script src="example.js" async></script>
- defer属性が指定されている場合
-
HTMLの構文解析と並行してスクリプトを読み込み、構文解析が完了した時点でそのスクリプトが実行されます。
<script src="example.js" defer></script>