HTML の達人？async と defer で実力を証明せよ

Posted at 2025-02-11

すべての Web 開発者は HTML を熟知していると言うでしょう。しかし… script の async と defer の違いを本当に理解していますか？

これらは現代のフロントエンド Web アプリでよく使われますが、意外と見落とされがちです。

まず、HTML における script タグの 3 つの使い方をまとめます。詳細は後述します。

デフォルト（順番に実行）: <script src='https://...'></script>
ダウンロード後すぐに実行: <script src='https://...' async></script>
ダウンロード後、最後に実行: <script src='https://...' defer></script>

script（デフォルト）

説明

ブラウザが HTML を解析しているとき、デフォルトの script タグを見つけると：

HTML の解析を一時停止する
指定された JavaScript をダウンロードし、ダウンロード完了後すぐに実行する
実行後、HTML の解析を再開する

以下のコードを見てみましょう：

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script src="https://.../Chart.min.js"></script>
    <script src="https://.../moment.min.js"></script>
    <script src="https://.../vue.min.js"></script>
  </head>
  <body>
    ウェブページの内容 1
  </body>
</html>

実行順序は以下のようになります：

console.log("First script"); を実行
Chart.min.js をダウンロード＆実行
moment.min.js をダウンロード＆実行
vue.min.js をダウンロード＆実行
ウェブページの内容を表示

注意点

デフォルトの script タグは 順番に実行 されるため、処理が長いスクリプトがあると後続のスクリプトが待たされ、HTML の解析も止まるため、白画面（何も表示されない状態）が発生する可能性があります。

script async

説明

HTML 解析中に script async を含むタグを見つけると：

HTML の解析を続けながら 非同期で JavaScript をダウンロード する
ダウンロードが完了すると、即座に実行 され、HTML の解析が一時停止する
スクリプト実行後、HTML の解析を再開する

以下のコードを見てみましょう：

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script async src="https://.../Chart.min.js"></script>
    <script async src="https://.../moment.min.js"></script>
    <script async src="https://.../vue.min.js"></script>
  </head>
  <body>
    ウェブページの内容 2
  </body>
</html>

実行順序は以下のようになります：

console.log("First script"); を実行
Chart.min.js、moment.min.js、vue.min.js を 非同期でダウンロード（HTML の解析は継続）
各スクリプトのダウンロードが完了した順に即座に実行（この間 HTML の解析は一時停止）
HTML の解析を再開

注意点

async のスクリプトは 実行時に HTML の解析をブロックする ため、HTML の構造が単純な場合、スクリプトの実行前にページが完全に表示される可能性が高い。
HTML の解析に時間がかかる場合、途中でスクリプトの実行が割り込むことがある。

script defer

説明

HTML 解析中に script defer を含むタグを見つけると：

HTML の解析を続けながら 非同期で JavaScript をダウンロード する
ダウンロード完了後もすぐには実行せず、HTML の解析が完了するまで待つ
HTML の解析が終わった後、順番にスクリプトを実行する

以下のコードを見てみましょう：

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script defer src="https://.../Chart.min.js"></script>
    <script defer src="https://.../moment.min.js"></script>
    <script defer src="https://.../vue.min.js"></script>
  </head>
  <body>
    ウェブページの内容 3
  </body>
</html>

実行順序は以下のようになります：

console.log("First script"); を実行
Chart.min.js、moment.min.js、vue.min.js を 非同期でダウンロード（HTML の解析は継続）
HTML の解析が完了後にスクリプトを順番に実行
ウェブページの内容を表示

注意点

defer がついた複数のスクリプトは 並行してダウンロードされる。
ただし、ダウンロードの順番に関係なく HTML の記述順で実行 される。

混合使用

実際の開発では、async と defer を組み合わせて使用することがあります。

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script defer src="https://.../Chart.min.js"></script>
    <script async src="https://.../moment.min.js"></script>
    <script defer src="https://.../vue.min.js"></script>
  </head>
  <body>
    ウェブページの内容 4
  </body>
</html>

実行順序は以下のようになります：

console.log("First script"); を実行
Chart.min.js、moment.min.js、vue.min.js を 非同期でダウンロード
moment.min.js のダウンロード完了後すぐに実行
Chart.min.js と vue.min.js は HTML の解析完了後に実行

まとめ

タグ	HTML の解析	実行順
`<script>`	ブロック	記述順に実行
`<script async>`	ブロックしない（ダウンロード時）ブロックする（実行時）	ダウンロード完了順（順不同）
`<script defer>`	ブロックしない	記述順に実行（HTML の解析完了後）