https://html.spec.whatwg.org/multipage/scripting.html からの図(asyncdefer.svg):
わかりやすいし示唆に富んでいる。
<script>
は書いた順にロード(フェッチ&パーズ&実行)される。したがって、実行順は保証される。<script>
は、メインスレッド(HTMLパーズ&描画スレッド)をブロックしてしまう。<script type="module">
は、フェッチ&パーズを別スレッド達に任せる。メインスレッドはそのまま走り続ける。<script type="module">
は、メインスレッドが一段落付いたところで実行される。実行順序は保証されない。<script>
よりは後に実行される可能性が高い。
言えることは:
- モジュールコードは、非モジュールコードのグローバル登録に頼ってもよい。
- 非モジュールコードは、モジュールコードのグローバル登録に頼れない。ほぼエラーする。
- モジュールコードのあいだの依存性はモジュールシステムの機構がやってくれる。
モジュールコード/非モジュールコードを正しく実行するには:
- モジュールコードは、それより前にロードされた非モジュールコード(非明示)と明示的なインポート元に頼っていい。
- 非モジュールコードは、それより前にロードされた非モジュールコード(非明示)にだけ頼れる。