defer と async は、外部の <script> がHTMLの解析に対していつダウンロードして実行されるかを変更します。どちらもスクリプトを並列にダウンロードでき、パーサーをブロックしません。違いは実行のタイミングです。
html
defer と async は、外部の <script> がHTMLの解析に対していつダウンロードして実行されるかを変更します。どちらもスクリプトを並列にダウンロードでき、パーサーをブロックしません。違いは実行のタイミングです。
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| ダウンロード | 並列 | 並列 |
| 実行 | ダウンロード完了直後 | HTML完全解析後 |
| 順序は保証される? | いいえ (先に終わった方) | はい (ドキュメント順) |
| パーサーをブロック? | 実行中のみ短時間 | しない |
defer — DOMに触れたり、相互に依存する/順序に依存するスクリプト向け(アプリコード)。DOMが存在してから順序通り実行され、DOMContentLoaded の直前に実行されます。async — 独立したサードパーティスクリプト(アナリティクス、広告など)で、DOMや他のスクリプトに依存しないもの向け。順序は関係なく、できるだけ早く実行します。<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
注: どちらも 外部 スクリプト (src) にのみ適用されます。インラインスクリプトでは無視されます。ESモジュール (type="module") はデフォルトで遅延実行されます。
defer/async を使うことで、スクリプトがHTMLの解析をブロックするのを防ぎ、読み込みパフォーマンスと First Contentful Paint を直接向上させます。
正しい方を選ぶこと(defer は順序が重要でDOM依存のアプリコード用、async はファイアアンドフォーゲットなサードパーティスクリプト用)は、遅い読み込みと順序依存バグの両方を避けられます。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する