<script src="" async defer></script>

ブラウザ 未確認
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所
内容 空 / スクリプトの説明(コメント)

script要素asyncdefer を追加すると、スクリプトの実行方法を指定することができます。この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>

使用例

async属性とdefer属性を指定した例

<!DOCTYPE html>
<html>
<head>

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

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

</head>
<body>



</body>
</html>