この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
JavaScriptを読み込むときに見かける「defer」や「async」。
違いがよくわからないまま使っていませんか？
これらはページの表示速度や動作に大きく影響する重要な属性です。
この記事では、deferとasyncの違いと使い分けを初心者の方にもわかりやすく解説します。
deferとasyncとは？
どちらも、JavaScriptの読み込み方法を制御するための属性です。
通常のscriptタグ
まずは基本の書き方です。
<script src="script.js"></script>
この場合、HTMLの読み込みが途中で止まり、JavaScriptが実行されます。
そのため、ページ表示が遅くなる原因になります。
deferとは
HTMLの読み込みと並行してJavaScriptを読み込み、HTMLの解析が終わった後に実行されます。
▼ 書き方（コピペOK）
<script src="script.js" defer></script>
特徴
- HTMLの読み込みを止めない
- 読み込み完了後に実行される
- 複数あっても順番通りに実行される
asyncとは
HTMLの読み込みと並行してJavaScriptを読み込み、準備ができ次第すぐに実行されます。
▼ 書き方（コピペOK）
<script src="script.js" async></script>
特徴
- HTMLの読み込みを止めない
- 読み込み完了次第すぐ実行
- 実行順序は保証されない
deferとasyncの違い
| defer | async | |
|---|---|---|
| 実行タイミング | HTML解析後 | 読み込み完了後すぐ |
| 実行順序 | 順番通り | バラバラ |
| 安定性 | 高い | 低い |
どちらを使うべき？
基本的には、以下のように使い分けます。
- defer：サイトのメイン処理（おすすめ）
- async：広告や解析タグなど
初心者におすすめの書き方
迷ったらdeferを使うのがおすすめです。
<script src="script.js" defer></script>
安定して動作し、トラブルも少なくなります。
まとめ
deferとasyncは、どちらもページ表示を高速化するための重要な機能です。
- defer：順番通りに安全に実行
- async：高速だが順番が不定
基本はdeferを使い、用途に応じてasyncを使い分けましょう。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。