<script src="" async defer></script>
| ブラウザ | 未確認 |
|---|---|
| 分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素 |
| 利用場所 | メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 |
| 内容 | 空 / スクリプトの説明（コメント） |
script要素に async や defer を追加すると、スクリプトの実行方法を指定することができます。この2つの属性は、外部スクリプトを読み込む際に使用することができます。
<script src="example.js" async defer></script>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
src="" |
外部スクリプト | URL | 読み込むスクリプトファイルを指定 |
任意属性（src を指定している場合に使用可） |
|||
async |
 利用可能な時点で実行 |
（async） |
値は省略可能、文書の読み込み中にそのスクリプトが利用可能になった時点で実行する |
defer |
読み込み完了後に実行 | （defer） |
値は省略可能、文書の読み込みが完了した時点でそのスクリプトを実行する |
- async属性とdefer属性は、script要素にsrc属性が指定されている場合にのみ、使用することができます。
async属性とdefer属性の有無により、次の4つのパターンで実行方法を指定することができます。
- async属性が指定されている場合
-
文書の読み込み中に、そのスクリプトが利用可能になった時点で実行されます。
<script src="example.js" async></script> - async属性がなく、defer属性が指定されている場合
-
文書の読み込みが完了した時点で、そのスクリプトが実行されます。
<script src="example.js" defer></script> - どちらの属性も指定されていない場合
-
文書の読み込み中に、そのスクリプトが読み込まれた時点で実行されます。
<script src="example.js"></script> - どちらの属性も指定されいる場合
-
async属性の方法で実行されますが、その方法に対応していないブラウザではdefer属性の方法で実行されます。
<script src="example.js" async defer></script>
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<script src="example.js" async defer></script>
</head>
<body>
</body>
</html>