ラボラジアン 1. はじめに
「async/defer なしの script」と「defer つきの script」は、記述した順番で実行されますが、「async つきの script」はどのような順番で実行されるか分かりません（そういう仕様です）。
「実行順序が分からない」と聞くとネガティブな印象を受けますが、この特徴によるメリットもあります。それは「<link rel=preload>」で script ファイルを先読みさせた場合、順番を気にすることなく実行できる点です。先読みしなかった場合と比較して、実行タイミングが早くなります。
2. async script をより早く実行させる
ということで、async な script を早めに実行させるには「<link rel=preload>」で先読みさせます。
例えば、以下のように main.js という JavaScript ファイルを async つきで読み込んでいたとします。
<script src="./main.js" async></script>この場合、このファイル名を指定した <link rel=preload> タグを <head> タグ内に記述します。
こんな感じです。なるべく上の方がよいです。
<link rel="preload" href="./main.js" as="script">
これで、この JavaScript ファイルを早めに読み込んでくれ（このファイルの優先度が変わります）、実行タイミングも早くなります。
Chrome DevTools の [Performance]パネルを使って、この動作を解析した画面がこちらです。
preload した script は早い段階で読み込まれていることが分かります。async の script は実行順序の制限がないため、実行タイミングも早くなります。
補足
「async/defer なしの script」と「defer つきの script」も preload で読み込ませ、全体の処理の工程が早く進めば、結果的に「async/defer なしの script」と「defer つきの script」もより早く実行されるということはありえると思います。
3. おわりに
今後、Chrome に「Priority Hints」という仕様が実装されるらしいのですが、そうなった場合は <link rel=preload> タグを追加しなくても、<img>タグに importance="high" という属性を指定するだけで実行タイミングを早めることができるそうです。
