インラインのscriptとdefer属性

インラインスクリプトには、defer属性は使えません。

例えば以下のようには書けません。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script defer >
  //c処理
</script>

MDNに書いてました↓。

defer属性は、 src 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。

引用：https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#attributes

このような場合に、a → b → cと処理したい場合は、以下のように書きます。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
  window.addEventListener( 'DOMContentLoaded', function(){ 
   //c処理
  })
</script>

（defer属性を付けたときの実行タイミングは、DOMContentLoadedの直前です。なのでこの場合、a → b → cという順番になります）

もしくは、loadイベントを使って書きます。

<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
  window.addEventListener( 'load', function(){ 
   //c処理
  })
</script>

おわり