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