<script> タグで非同期的読み込みを行う際は、
async 属性 または defer 属性を指定すればよいが、
この2つの大きな違いとして、実行タイミングが挙げられます。
async
ダウンロード完了直後に JavaScript が実行されるので、いつ実行されるのか分からない。
また、複数の JavaScript ファイルがある際の実行順も不明。
<script src="script.js" async>
defer
ダウンロード完了直後にすぐ実行されず、DOM構築完了後に実行。
defer 属性付きの JavaScript が複数あった場合、<script> タグの記述順に実行される。
<script src="script.js" defer>
defer のが実行順などある程度制御できるのでおすすめです。