<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>

使用例

defer属性を指定した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<script src="example.js" defer></script>

</head>
<body>



</body>
</html>