defer属性

script要素のdefer属性は、ページ読み込み時に、外部のスクリプト・ファイルのスクリプトを実行する属性。

ブラウザ対応

構文

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

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

async属性もdefer属性も指定しない場合、外部のスクリプト・ファイルを読み込んだ時点でスクリプトを実行するが、defer属性を指定すると、ページの読み込みが完了した時点で実行する。

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

サンプルコード

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

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

サンプル

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

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

defer属性あり

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>script要素のdefer属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のdefer属性のサンプル</h1>
		<script src="sample-script-async-defer.js" defer></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」である要素にテキストを出力。";

defer属性なし

HTMLソースコード
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>script要素のdefer属性のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>script要素のdefer属性のサンプル</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」である要素にテキストを出力。";