scriptタグによるJSファイルのロード

https://html.spec.whatwg.org/multipage/scripting.html からの図(asyncdefer.svg):

わかりやすいし示唆に富んでいる。

  • <script> は書いた順にロード(フェッチ&パーズ&実行)される。したがって、実行順は保証される。
  • <script> は、メインスレッド(HTMLパーズ&描画スレッド)をブロックしてしまう。
  • <script type="module"> は、フェッチ&パーズを別スレッド達に任せる。メインスレッドはそのまま走り続ける。
  • <script type="module"> は、メインスレッドが一段落付いたところで実行される。実行順序は保証されない。<script> よりは後に実行される可能性が高い。

言えることは:

  1. モジュールコードは、非モジュールコードのグローバル登録に頼ってもよい。
  2. 非モジュールコードは、モジュールコードのグローバル登録に頼れない。ほぼエラーする。
  3. モジュールコードのあいだの依存性はモジュールシステムの機構がやってくれる。

モジュールコード/非モジュールコードを正しく実行するには:

  1. モジュールコードは、それより前にロードされた非モジュールコード(非明示)と明示的なインポート元に頼っていい。
  2. 非モジュールコードは、それより前にロードされた非モジュールコード(非明示)にだけ頼れる。