JavaScriptファイルをHTMLファイルのどこで読み込むのか？

<body>要素の末尾？　<head>要素の中？属性は？
JavaScriptファイルの読み込み位置ごとに、注意点やメリット/デメリットを解説します。

JavaScript入門者向けのテキストやネット記事をいくつか拝見して、方法が1つしか紹介されていないケースを散見したので記事にしました。

結論

JavaScriptファイルの読み込み位置は、実行順やDOM操作の有無を考慮して使い分ける。

<head>内に<script src="..." defer>で書く
- スクリプトの順序が重要
- DOM操作がある
<body>要素の末尾(</body>の直前) に書く
- DOM操作がある
- 画面描写速度重視（bodyを先に読み込む）
- 伝統的な書き方を継承
<head>内に<script src="..." async>で書く
- 非同期実行（DOM依存がない、単体で完結する）

モダンな構成では「 <head>タグ内に直接書く（defer属性 async属性を付けない）」ケースはあまりない。
しかし、後続のスクリプト（他のJSファイルやBody）よりも、確実に先に実行しておきたい場合に使用する事もある。

それぞれの特徴を見ていきましょう。

<head>
　<title>ページタイトル</title>
  <script src="script.js"></script>
</head>

ＤＯＭ操作できない。
コードは上からレンダリングされるため、そもそもJavaScriptでＤＯＭ操作する対象（body内の要素）がレンダリングされていないためエラーとなります。
上記の対策にJavaScriptコード内で、「addEventListener（loadイベント、DOMContentLoadedイベント）」を使ってレンダリング終了後に、ＤＯＭ操作を実行する方法もありましたが、次に紹介する方法が主流になっています。

<head>
　<title>ページタイトル</title>
  <script src="script.js" defer></script>
</head>

<head>
　<title>ページタイトル</title>
  <script src="script.js" async></script>
</head>

<body>
  <!-- コンテンツ -->
  ...
  ...
  ...

  
  <script src="script.js"></script>
</body>

属性	読み込み	実行タイミング	実行順序
なし	同期	読み込み時（すぐ）	順序通り
defer	非同期	HTML解析後（DOMContentLoaded前）	順序通り
async	非同期	読み込み完了時（すぐ）	順序保証なし