HTML5 の script 要素の async と defer の使い分けについて

今日なんとなく気になって朝っぱらから色々調べてみてイメージが掴めたんでメモ。

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 ページ高速化の役に立つ強力な仕様 と考えているので、 個人的には 使えるところで積極的に使って行けたらなー と思ってます。はい。