JavaScriptの読み込み順序

コンソールで出力順番を確認することができます。

<script src="/assets/demo/js/road-order/defer.js" defer></script> // console.info('2: script defer');
<script src="/assets/demo/js/road-order/async.js" async></script> // console.info('任意のタイミング: script async');
<script>
  window.addEventListener("load", () => console.info("4: laod"));
  document.addEventListener("DOMContentLoaded", () => console.info("3: DOMContentLoaded"));
</script>
<script>
  console.info("1: 何もなし");
</script>

js処理順

★ = js実行

HTMLパース開始
    ↓
★通常script実行（パースを中断）
    ↓
HTMLパース再開
    ↓
DOM構築完了
    ↓
★defer script実行（記述順）
    ↓
★DOMContentLoadedイベント発火
    ↓
画像等のリソース読み込み継続
    ↓
★loadイベント発火

※（★async scriptは任意のタイミングで割り込み）