JavaScript/Basic/ローディング

どのようにブラウザにJSのコードをローディングするか？

HTML に script 要素で直書きする

<script>
alert("hoge");
</script>

HTML のロードと共に解釈、実行される。

script 要素に src 属性で指定する

<script src="hoge.js"></script>
<script src="piyo.js"></script>

DOM の構築中これが来ると src のダウンロード、そしてその内容の実行が行われる。 その実行の完了まで DOM の構築が止まる。

ポイントとして・・・

• DOM の構築以前にJSが実行される場合があるので、DOM の構築タイミングを自前ではかる必要がある
• ロードと実行が同期的に行われるため、複数存在した場合必ず書いた順に実行される
• ロードと実行の度に DOM の構築が止まるので描画や実行開始が遅い

script 要素に src 属性で指定する。そこに async 属性を付与する

<script src="hoge.js" async></script>
<script src="piyo.js" async></script>

DOM の構築中これが来ると src のダウンロード、そしてその内容の実行が行われる。 しかし、指定しない場合と違い、ロードは始まるが、DOM の構築は止まらない。 その後ロード完了後JSが実行される。この実行中は DOM の構築は停止する

ポイントとして・・・

• DOM の構築以前にJSが実行される場合があるので、DOM の構築タイミングを自前ではかる必要がある
• ロードと実行が同期的に行われないため、複数存在した場合に実行順番がコントロールできない。なのでこれも自前ではかる必要がある
• ロードが DOM の構築を止めない且つ複数同時に進行するので描画や実行開始が早い

script 要素に src 属性で指定する。そこに defer 属性を付与する

<script src="hoge.js" defer></script>
<script src="piyo.js" defer></script>

DOM の構築中これが来ると src のダウンロードが始まるが DOM の構築をブロックしない。 ダウンロード完了後も実行されない。 そして、DOM が構築完了したイベント、つまり DOMContentLoaded が発火する直前に書いた順に実行される。

ポイントとして・・・

• ロードがDOM構築をブロックしないので描画が早い
• DOM の構築後に実行されるので、DOM の存在前提のコードで問題が起きない
• 書いた順に動くので実行の前後関係をコントロールできる

つまりこれが最強ということになる。