<script>タグを<head>内に書くのと</body>前に書くのとでは何か挙動に違いがあるのでしょうか?

JavaScript39閲覧

ベストアンサー

0

ThanksImg質問者からのお礼コメント

ご回答ありがとうございます。 わかりやすかったです。 実行順序の違いによって表示時間が変わってくるのですね

お礼日時:1/5 3:47

その他の回答(3件)

0

昔は、JavaScriptのプログラムをhead要素に記載するというのが、良い作法とされていました。しかし、いまは「できるだけ後ろに記述する」のが、良しとされています。 後ろに記述する理由は、ユーザーを待たせないようにするためです。 scriptタグは、登場した時点でJavaScript実行エンジンに渡され実行されます。長いJavaScriptプログラムだと、それを実行するのに時間がかかることがあります。 HTMLの頭に書いた場合には、コンテンツが表示される前にJavaScriptのプログラムが実行されるので、その処理に時間がかかると、ユーザーはブラウザが空白のまま待つことになり、反応が悪いと感じることがあります。しかし、後ろの方で実行すれば、コンテンツを見たあとに実行されるので表示されるまでの待ち時間がなくなるのです。

0

><script>タグを<head>内に書くのと</body>前に書くのとでは何か挙動に違いがあるのでしょうか? 適材適所です。 fwHTMLRoot = document.documentElement; fwHTMLRoot.style.setProperty('--HTML_FontSize', '25px'); ↑このようにCSS変数を定義する場合は、<STYLE>タグよりも前に記述しなければなりません。 hoge = document.getElementById('hoge'); ↑このようにidが'hoge'の要素のオブジェクトを取得する場合は、そのタグよりも後に記述しなければなりません。

1

実行タイミングが異なります。 HTMLは上の行から読み込まれ、<script>要素内も読み込まれたタイミングで実行されます。 JavaScriptは読み込まれている要素しか操作できなかったり実行中以降の行の読み込みが止まったりと色々問題になるので『</body>』前(大抵のHTML読み込み終了後)に記述することで回避することがあります。 まあこのあたりはJavaScriptの記述次第でいくらでも回避できるので好みによるのと「いつ実行したいか」ですね。

1人がナイス!しています

ごめんなさい記載ミスです。 以降の行の読み込みが止まるのは、実行中ではなく『src』属性による外部ファイル参照時の読み込み中でした。