スクリプトの実行タイミング

INDEX

JavaScriptはブラウザ上で実行され、Webページに動きや機能を追加するためのプログラミング言語です。スクリプトがいつ実行されるかによって、ページの表示速度や動作に大きな違いが生まれます。

特に、JavaScriptを読み込む位置や、async・deferなどの属性の違いは、現在のWeb開発では非常に重要なポイントです。本記事では、それぞれの実行タイミングと使い分けについて分かりやすく解説します。

ブラウザはHTMLを上から順番に読み込みながらページを表示します。JavaScriptを読み込む位置や設定によって、実行されるタイミングが異なります。

タイミング	説明
`<head>`内での実行	HTMLの解析中にスクリプトが実行されます。処理が終わるまでHTMLの解析が一時停止するため、ページ表示が遅くなることがあります。
`<body>`末尾での実行	ページの主要なHTMLを読み込んだ後にスクリプトが実行されます。画面が表示されてから処理されるため、表示速度への影響を抑えられます。
非同期スクリプト（`async`）	HTMLの解析と並行してダウンロードされ、準備ができ次第すぐに実行されます。実行順序は保証されません。
遅延スクリプト（`defer`）	HTMLの解析と並行してダウンロードされ、HTMLの解析完了後に順番どおり実行されます。

近年のWeb開発では、外部JavaScriptファイルを読み込む際はdefer属性を付ける方法が一般的です。

HTMLの表示を妨げず、スクリプトの実行順序も保たれるため、多くのWebサイトで採用されています。

スクリプトの実行場所とタイミングの違い

スクリプトをどこに配置するかによって、ページの表示速度やJavaScriptからHTML要素へアクセスできるタイミングが変わります。

<head>内に配置されたスクリプトは、その位置までHTMLが読み込まれるとすぐに実行されます。


<head>
    <script src="script.js"></script>
</head>

この場合、JavaScriptの実行中はHTMLの解析が停止します。そのため、処理が重いスクリプトではページ表示が遅くなる場合があります。

また、この時点ではまだ<body>内の要素が読み込まれていないため、ボタンや入力欄などのHTML要素を取得しようとするとエラーになることがあります。

<body>タグの終了直前に配置すると、HTMLの大部分を読み込んでからJavaScriptが実行されます。


<body>
    <!-- ページのコンテンツ -->

    <script src="script.js"></script>
</body>

この配置方法では、画面表示を優先できるほか、多くの場合でHTML要素が既に読み込まれているため、そのままJavaScriptから操作できます。

以前はこの方法がよく利用されていましたが、現在ではdeferを利用するケースが増えています。

async属性を付けると、HTMLの解析と並行してスクリプトがダウンロードされます。ダウンロードが完了すると、その時点で直ちに実行されます。


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

特徴は次のとおりです。

アクセス解析ツールや広告タグなど、他のJavaScriptに依存しないスクリプトに適しています。

defer属性を付けたスクリプトもHTMLの解析と並行してダウンロードされますが、実行されるのはHTMLの解析が完了した後です。


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

特徴は次のとおりです。

複数のJavaScriptファイルを順番どおり実行したい場合や、ページ内のHTML要素を操作するスクリプトでは、deferを使用するのが一般的です。

属性	実行タイミング	実行順序	主な用途
`async`	ダウンロード完了後すぐ	保証されない	広告、アクセス解析など
`defer`	HTML解析完了後	保証される	一般的なWebアプリやサイト