async, deferは利用時の制約がありますので、それに応じてどの順序でどこに記述するかある程度決定されます。
これらのオプションを利用する場合、JavaScriptによるブラウザのFirst Paintのブロックを回避するために利用します。
ただし、これらは正しく利用しないと機能要件を満たせない場合があるので、順を追って指定していきましょう。
Step 1: bodyの最後でscriptを記述する
まずは機能要件を確実に担保するには、</body>
の直前に<script>
を記述することでしょう。
<body>
<script src="jquery.js"></script>
<script src="file1.js"></script>
<script src="file2.js"></script>
</body>
まずはこの形式を作ってください。
Step 2: deferをつける
HTMLパーサーがscriptの記述箇所に到達したあと、JavaScriptのダウンロードが始まり、
HTMLのパースが完了してから実行されます。つまり、script
タグをhead
タグ内に記述するとbody
末尾につけるより早くJSのダウンロードが完了します。また、defer
は定義された順番に実行されます。
これらより、Step 1のコードは次のように書き換えることができます。
<head>
<script defer src="jquery.js"></script>
<script defer src="file1.js"></script>
<script defer src="file2.js"></script>
</head>
Step 3: asyncをつける
async
を付与可能なscriptタグには条件があります。
- 読み込むJavaScriptが他のコードに依存していない場合
- 機能的に先に読み込まれても問題ない場合
たとえば次のようなケースを考えます。
jquery.js
: jQueryライブラリ
file1.js
: 実装にjQueryを利用している
file2.js
: 実装にjQueryを利用していない
このとき、file1.js
はjquery.js
に依存しているためjquery.js
の読み込み後に実行する必要があります。
すなわち、以下のように書くことができます。
<head>
<script defer src="jquery.js"></script>
<script defer src="file1.js"></script>
<script async src="file2.js"></script>
</head>
file2.js
は排他的なコードであるため、file1.js
やjquery.js
よりも前に実行しても良い気がしますが、
file2.js
がダウンロード完了後にJavaScriptが即実行され、その間HTMLのパースが一時停止されます。仮にパースが再開されるまでの待機時間が長く、その後にdefer
の付いたscriptタグがパースされ、後者のダウンロード時間がHTMLパース完了より長い場合に時間的な損失が発生します(追記画像のPattern 2に該当します)。
すなわち、defer
のあとにasync
のついたscriptタグを定義したほうが細かい損失を気にせずに済みます。
回答
今回の問に対する回答に移ります。
- 目的1.ページ読み込み完了前に実行する(jQueryやグローバルナビゲーションなど)js読込
- 目的2.ページ読み込み完了後に実行する(クリックしたら一番上までスクロールなど)js読込
これだけの条件であれば、Step 2のdefer
オプションをつけたscript
タグをhead
タグ末尾に入れる、までとなります。async
オプションを付けるかどうかを判断するためには、ファイルの実行順序の依存関係の情報が必要です。
追記
