メインコンテンツまでスキップ

[Easy] 📄 <script>, <script async>, <script defer>

概要​

HTML では、JavaScript ファイルを読み込む主な方法が3つあります：

  1. <script>
  2. <script async>
  3. <script defer>

これら3つの方法は、スクリプトの読み込みと実行において異なる動作をします。

詳細な比較​

<script>​

  • 動作：ブラウザがこのタグに遭遇すると、HTML の解析を停止し、スクリプトをダウンロードして実行し、その後 HTML の解析を再開します。
  • 使用場面：ページのレンダリングに不可欠なスクリプトに適しています。
  • メリット：スクリプトが順番通りに実行されることが保証されます。
  • デメリット：ページのレンダリングが遅延する可能性があります。
<script src="important.js"></script>

<script async>​

  • 動作：ブラウザはバックグラウンドでスクリプトをダウンロードしながら、HTML の解析を続行します。スクリプトのダウンロードが完了すると即座に実行され、HTML の解析が中断される可能性があります。
  • 使用場面：アナリティクスや広告スクリプトなど、独立したスクリプトに適しています。
  • メリット：HTML の解析をブロックせず、ページの読み込み速度を向上させることができます。
  • デメリット：実行順序が保証されず、DOM が完全に読み込まれる前に実行される可能性があります。
<script async src="analytics.js"></script>

<script defer>​

  • 動作：ブラウザはバックグラウンドでスクリプトをダウンロードしますが、HTML の解析が完了してから実行します。複数の defer スクリプトは、HTML 内の記述順序に従って実行されます。
  • 使用場面：完全な DOM 構造が必要だが、即座には必要でないスクリプトに適しています。
  • メリット：HTML の解析をブロックせず、実行順序が保証され、DOM に依存するスクリプトに適しています。
  • デメリット：スクリプトが重要な場合、ページのインタラクション可能になるまでの時間が遅延する可能性があります。
<script defer src="ui-enhancements.js"></script>

具体例​

デートの準備をしていると想像してください：

  1. <script>： 準備をすべて中断して、相手に電話してデートの詳細を確認するようなものです。コミュニケーションは確実ですが、準備時間が遅れる可能性があります。

  2. <script async>： Bluetooth イヤホンで相手と通話しながら準備するようなものです。効率は上がりますが、通話に集中しすぎて服を間違えてしまうかもしれません。

  3. <script defer>： 相手にメッセージを送って、準備が終わったら折り返すと伝えるようなものです。こうすれば準備に集中でき、すべて整ってからしっかりコミュニケーションが取れます。

現在の使用状況​

モダンフレームワークの開発環境では、通常 <script> を手動で設定する必要はありません。例えば、Vite はデフォルトで module、つまり defer の動作を採用しています。

<script type="module" src="/src/main.js"></script>

Google Analytics などの特殊なサードパーティスクリプトの場合を除きます。

<script async src="https://www.google-analytics.com/analytics.js"></script>