今日なんとなく気になって朝っぱらから色々調べてみてイメージが掴めたんでメモ。
HTML5 の script の要素の async と defer の違い
HTML5 の script 要素の async 属性と defer 属性は、どちらも、
src属性で指定されたスクリプトを非同期で読み込む
という仕様なんですが、これらは、
asyncは非同期読み込みで 実行順序が保証されずloadの後に呼ばれるdeferは非同期読み込みだが 実行順序は保証されDOMContnetLoadedの直前に呼ばれる
と言う違いがあって、
この二つは読み込むスクリプトの種別によって使い分ける必要が有る
と言う事が今回調べた感じで判って来ました。
HTML5 の script 要素の async と defer の使い分け
基本的に、
deferで読み込まれたスクリプトはDOMContentLoadedイベントの直前には呼ばれる
というのは（スクリプトエラーとか無い限り）保証されてるっぽいので、実際の使い分けは、
- HTML の DOM に依存するスクリプトは
defer属性 - HTML の DOM には依存しないが HTML から読み込む必要があるスクリプトは
async属性
という感じなるんじゃないかと思ってます。
そのため、例えば、
JSX を使って HTML の DOM 上で UI を構成するスクリプト（React や Vue 、Angular など）
は defer 属性を使って読み込むと良さそうで、逆に、
DOM を必要としない、純粋な Web Worker などの為のスクリプト
の類いは async 属性を使えば良い、という感じになると個人的には考えてます。
まとめ
この辺り一言で言えば、
DOM を触るなら
defer属性を使い、DOM がまったく関係しないならasync属性を使う
と認識しておけば、基本的には問題ないんじゃないかなーと個人的には思っています。
ただ、とは言え async 属性は使いどころが限られそうな印象があり、
実際のところ async 属性を使いそうな場面って、思い付く限りでは、
（純粋な） Web Workers とか Web Notifications 関連など
の、DOM がまったく関係して来ない箇所だけに限定される んじゃないか、 と今のところ考えていたりしますね。
ただし defer も async も 使い方と使いどころを間違わなければ 、
Web ページ高速化の役に立つ強力な仕様 と考えているので、
個人的には 使えるところで積極的に使って行けたらなー と思ってます。はい。
