async / defer

[hysryt]

defer

• 非同期で読み込みが行われる。
• HTMLのパース完了後実行される。
• 実行完了するまで DOMContentLoaded イベントは発火しない。
• <script> の記述順に実行される。

[hysryt]

async

• 非同期で読み込みが行われる。
• 読み込み完了後、即時実行される。
  • HTMLのパース中に読み込みが完了した場合、パース処理をブロックし、スクリプトの実行を優先する。
• 実行完了するまで load イベントは発火しない。
• <script> の記述順は実行の順序に関係しない。

[hysryt]

どちらを使うか

defer

• DOM操作に関係する処理
• 依存関係にあるスクリプトファイル

async

• 上記以外

[hysryt]

パース終了時の動作

1. HTMLパース終了
2. document.readyState を interactive に変更
3. defer を指定したスクリプトを全て実行
4. DOMContentLoaded イベント発火
5. async を指定したスクリプトでまだ実行されていないものがあれば全て実行
6. 画像など必要なファイルが全て読み込まれるのを待つ
7. document.readyState を complete に変更
8. load イベント発火

https://html.spec.whatwg.org/multipage/parsing.html#the-end