headタグ内にscriptタグを置く方法

こんにちは、くりちゃんです。

ある日。あれ、なんでscriptタグって</body>の前に置いているんだっけ…と疑問に思ってしまいました。

今まで脳死で</body>の前に置いていたので色々と調べていたら、defer属性とasync属性というのがあるみたい！個人的にはhead内にscriptタグがあった方が見やすいな思うのでその方法を紹介したいと思います！

そもそもなぜ</body>の前に置くのか

理由は単純でHTML・CSSが読み込まれ後にJSファイルを読み込んでほしいからですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="home.js"></script>
</head>
<body>
    <p>home.jsが先に読み込まれる</p>
</body>
</html>

上記の場合だとhome.jsが先に読み込まれてしまうため、HTMLやCSSの読み込みが止まってしまいます。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
    <p>HTML・CSSが先に読み込まれる</p>
    <script src="home.js"></script>
</body>
</html>

</body>の前に置くことでHTML・CSSが読み込まれ後にhome.jsが読み込まれます。

jsを先に読み込んでしまうと想定した通りの動きにならないことあるので、それを避けるために</body>のまえに<script>タグを置いているんですね。

headタグに置く方法はないのかな…

個人的にheadタグ内に全部書いた方がきれいだと思うので、調べてみたところ、scriptタグにdefer属性とasync属性を書くやり方があるみたい。

スクリプトを非同期で読み込ませ、ページ全体の解析処理が完了してから実行させる。

<script src="home.js" defer></script>

このように記述すればhead内に書いてもHTML・CSSが読み込まれた後にhome.jsが読み込まれます。

スクリプトを非同期で読み込ませ、読み込み完了後すぐに実行させる。

<script src="home.js" async></script>

このように記述するとHTML・CSSの読み込みと同時にhome.jsも読み込まれます。

head内にscriptタグを書くときはdefer属性をつけることで、読み込む順番を制御することができました。

async属性はGoogleアナリティクスのスクリプトに書くと同時に処理してくれるので、良いのかなと思います。

今後も疑問に思ったことをいろいろと研究してみたいですね！