menu
書いてる野郎
orebike@gmail.com
どのようにブラウザにJSのコードをローディングするか?
HTML に script 要素で直書きする
<script> alert("hoge"); </script>
HTML のロードと共に解釈、実行される。
script 要素に src 属性で指定する
<script src="hoge.js"></script> <script src="piyo.js"></script>
DOM の構築中これが来ると src のダウンロード、そしてその内容の実行が行われる。 その実行の完了まで DOM の構築が止まる。
ポイントとして・・・
script 要素に src 属性で指定する。そこに async 属性を付与する
<script src="hoge.js" async></script> <script src="piyo.js" async></script>
DOM の構築中これが来ると src のダウンロード、そしてその内容の実行が行われる。 しかし、指定しない場合と違い、ロードは始まるが、DOM の構築は止まらない。 その後ロード完了後JSが実行される。この実行中は DOM の構築は停止する
ポイントとして・・・
script 要素に src 属性で指定する。そこに defer 属性を付与する
<script src="hoge.js" defer></script> <script src="piyo.js" defer></script>
DOM の構築中これが来ると src のダウンロードが始まるが DOM の構築をブロックしない。
ダウンロード完了後も実行されない。
そして、DOM が構築完了したイベント、つまり DOMContentLoaded
が発火する直前に書いた順に実行される。
ポイントとして・・・
つまりこれが最強ということになる。