目次
こんにちは！ともです(@_tomo_engineer)！
JavaScriptを記述する際にはHTMLファイルに読み込むと思います。
JavaScriptを記述する場所は次の3つありますが、scriptの位置での違いについてまとめたいと思います。
- body要素の配下
- body閉じタグの直前
- head要素の配下
body要素に記述
HTMLの要素内に記述するJavaScriptをインラインスクリプトと呼びます。
<script type="text/javascript">
// ここにスクリプトを記述
</script>この様な閉じタグの中にJavaScriptは記述しますが、HTMLのbody要素の内に書いた場合ページの保守性・可読性が損なわれます。body要素に適当に記述することは避けるべきです。
<body>
<script type="text/javascript">
// スクリプトをbodyの途中で読み込む
</script>
<footer></footer>
</body>body閉じタグの直前
ブラウザは一般的にスクリプトの読み込み後に描画を行います。
つまり、大きなスクリプトの場合読み込みに時間がかかり、描画が遅れると言う問題が発生します。
ページを高速で描画するためにbody閉じタグの直前にスクリプトを設置する事が行われます。これによりページの描画を終えた後にスクリプトを読み込む事ができます。
bodyタグにスクリプトを書くのであればbody閉じタグの直前が良いです。
<body>
<script type="text/javascript">
// スクリプトを</body>直前で読み込む
</script>
</body>head要素の配下
body閉じタグの直前でスクリプトを読み込む事が良いですが、これでは不十分なケースが存在します。
それはbody内でJavaScriptの関数を呼び出す必要がある場合です。
JavaScriptは先に関数の宣言をしないと実行できないため、headタグ内で事前に読み込む必要があります。
<head>
// まかなえ無いものはheadで読み込む
<script src="test.js"></script>
<head>
<body>
<script type="text/javascript">
// スクリプトを</body>直前で読み込む
</script>
</body>まとめ
bodyタグの任意の箇所にscriptを記述するのではなく、
- body閉じタグの直前にスクリプトは書く
- 閉じタグ直前でまかなえない場合はheadタグに書く
と言う事がわかりました。
しっかりと区別して利用して行きたいです。
