意外と知らないシリーズです。

JavaScriptを別ファイルで読み込む際に次の様に記述しますよね？

<script src="○○○.js"></script>

実は読み込み方には大きく分けて３つの読み込み方があります。

それが次の通りになります。

<script src="○○○.js"></script>
<script src="○○○.js" async></script>
<script src="○○○.js" defer></script>

それぞれについて簡単に説明します！

<script src=”○○○.js”></script>の場合

通常通りの読み込み方で、<script>が出現する所までHTMLを展開していき、<script>が見つかればHTMLの展開を停止し、JSのダウンロード＆実行します。

それが終わり次第、HTMLの展開を再開します。

<script src=”○○○.js” async></script>の場合

JSのダウンロードのみ非同期の読み込み方になります。（deferでも非同期ですが、細かい挙動が異なります。）

HTMLの展開と、JSのダウンロードが同時に進行します。

JSのダウンロードが完了すると、HTMLの展開を停止し、JSの実行をした後に、HTMLの展開を再開します。

<script src=”○○○.js” defer></script>の場合

JSのダウンロードのみ非同期の読み込み方になります。（asyncでも非同期ですが、細かい挙動が異なります。）

HTMLの展開と、JSのダウンロードが同時に進行します。

HTMLの展開が完了次第、JSの実行を行います。

これが、一番安全にJavaScriptの実行が行える記述方法ですね。

以上になります。

文章では分かりづらいかもしれません。

もし分かりづらいと思った方は、次のサイトで図で説明をしてくれているので、是非チェックしてみて下さい。

https://www.wakuwakubank.com/posts/614-javascript-async-defer/