walk diagonally

基本的にはプログラミングの話のつもり。フロントエンドよりです。

HTMLタグの「defer」でちょっと実験してみた

本来であればそのタグが解析されたタイミングでjsの読み込み->実行が行われるところですが、「defer」を使うことにより、HTMLパースを阻害せず、なおかつ DOMContentLoaded より先に実行されるという画面描画をほどよくブロッキングしない仕組みがあったので、少し実験をしてみました。

developer.mozilla.org

混ぜてみる

// sample-1.js
console.log("sample-1 is called");

// sample-2.js
console.log("sample-2 is called");
<script defer src="/js/sample-1.js"></script>
<script src="/js/sample-2.js"></script>

結果

sample-2 is called
sample-1 is called

defer をつけていない方はパースされたタイミングで実行されるので、先に呼び出される。

両方つけてみる

// sample-1.js
console.log("sample-1 is called");

// sample-2.js
console.log("sample-2 is called");
<script defer src="/js/sample-1.js"></script>
<script defer src="/js/sample-2.js"></script>

結果

sample-1 is called
sample-2 is called

defer がついているものに関してはタグが記載されている順番で実行される

所感

今まであった </body>の近くにjsのファイルはおきましょう みたいなことはもうこれ以降気にしなくてよくなるのはありがたいですね。 もっとしっかり描画速度の最適化をしたい、ということだったら関係ないファイルとかは async つけたりして、完全に非同期で読み込むといいのだろうと思います。 ただ、その分類がなかなか手間だと思うので、困ったらひとまず defer をつけるでいいのかなと思います