async属性

script要素のasync属性は、外部のスクリプト・ファイルのスクリプトが使用可能になったら実行する属性。

ブラウザ対応

構文

<script src="外部スクリプト・ファイルのURL" async></script>

script要素にsrc属性を指定した場合だけ、async属性は指定できる。

async属性もdefer属性も指定しない場合、外部のスクリプト・ファイルを読み込んだ時点でスクリプトを実行するが、async属性を指定すると、使用可能になった時点で実行する。

async属性とdefer属性を両方指定した場合、async属性に対応しているブラウザは、async属性に従う。async属性に対応していないブラウザは、defer属性に従う。

サンプルコード

<script src="sample.js" async></script>

<script src="sample.js" async>
	// コメント文
</script>

サンプル

「async属性あり」と「async属性なし」の２つのサンプルは、async属性があるかないかだけの違いである。

「async属性あり」のサンプルは、「スクリプトで表示：」の右側にテキストを表示するが、「async属性なし」のサンプルは、「スクリプトで表示：」の右側にテキストを表示しない点に注目。

async属性あり

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>script要素のasync属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のasync属性のサンプル</h1>
		<script src="sample-script-async-defer.js" async></script>
		<p style="font-size: 24px;">スクリプトで表示： <b id="sample" style="color: #f00;"></b></p>
	</body>
</html>
実際の表示

別窓で表示。

外部スクリプト・ファイル「sample-script.js」に記述したJavaScriptのソースコード
document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";

async属性なし

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>script要素のasync属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のasync属性のサンプル</h1>
		<script src="sample-script-async-defer.js"></script>
		<p style="font-size: 24px;">スクリプトで表示： <b id="sample" style="color: #f00;"></b></p>
	</body>
</html>
実際の表示

別窓で表示。

外部スクリプト・ファイル「sample-script.js」に記述したJavaScriptのソースコード
document.getElementById("sample").innerHTML = "id属性が「sample」である要素にテキストを出力。";