どうもこんにちは。
先にお伝えしますと、この質問は技術的興味から来た質問です。
まず、HTMLのコードで以下の書き方をよく見かけます。

HTML
1<!doctype html>
2<html>
3<head>
4    <link rel="stylesheet" href="http://example.com/">
5    <meta charset="utf-8">
6    <title></title>
7</head>
8<body>
9<script src="http://example.com/"></script>
10</body>
11</html>

このコードでscriptタグをbodyタグの下に書いている理由をご教授していただきたいということが今回の質問内容です。
稚拙な質問で恐縮ですが、よろしくおねがいします。

行動規範の内容に同意します

回答8件

scriptタグの記述場所は別にどこでも構わないのですが、bodyタグの終端に記述する理由は以下のような理由があるのではないかと思います。

javascriptファイルを読み込んでいる間は、HTMLファイルを読み込まないため、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くする。
CSSはheadタグ中に、javascriptはbodyタグの下にまとめて記述することでわかりやすくなる。

ただし、HTMLが解析される前に実行されるべきjavascriptファイルなどはheadタグ内に記述するべきだと思います。
headタグ内にscriptタグを置いたときには、javascriptファイルが最初に読み込まれるので、そのjavascriptファイルのサイズが巨大だった場合、ページの表示に時間がかかることになります。その解決策として、async属性という非同期的にjavascriptファイルを読み込むことができるようになる属性を使います。ただし、非同期的にjavascriptファイルを読み込むということは、ファイルが複数ある場合にどれが最初に読み込まれるかわからないということです。なので、もしもA.jsとB.jsというファイルがあって、絶対にA.jsから先に読み込む必要があったとしても、async属性を使うとB.jsから読み込まれてしまうことがあります。また、**一部ブラウザがこの属性に対応していない**ので注意する必要があります。

投稿2017/02/26 01:57

s8_chu

総合スコア14731

scriptタグをbodyタグの下に書いている理由

SEOの観点です。

大前提として、scriptタグをHTML内に挿入すると、
そのscriptを定義すると、一度その時点でページのレンダリングはストップします。
srcが定義されているならファイルをダウンロードし、全ての行の実行が完了してからページのレンダリングを再開します。

HTMLとCSSで人間が理解出来るページがほぼ大多数を占めています。
なので、最初に見る画面としてはJavaScriptは存在する必要はありません。

3秒以内にページが表示されないとユーザーの4割は直帰してしまうという統計データがあるそうです。
「SEO 3秒」等で調べてみてください。
要するにユーザーに見せる画面は早ければ速いほどよいという考え方です。

その辺の経緯から、様々なノウハウが蓄積されていきました。

JavaScriptは慎ましく
初動のレンダリングにJavaScriptは関係ないんだから下に書け

これはGoogleのサーチエンジンのコンセプトにも取り入れられており、
上記の条件に準拠したページはSEOとして順位にプラスの評価値がつきます。

この仕組みを利用する手段もあります。

例えばサイト改善の手法の1つにA/Bテストがあります。
ランダムに2～3パターンのページをどれを表示するかを決定し、
どのページに割り振られたユーザーがそのサイトに好意的だったかを調べてサイト改善の材料にします。

このA/BテストのOptimizelyでは、
Headタグ内にスクリプトを設置すると、読み込みが終わるまでページのレンダリングを行わないという仕様を逆手に取り、
あえてHeadタグ内にOptimizelyのタグを埋め込み、対象ページの選定やらページの書き換え内容を宣言した後に、ページをレンダリングさせます。

投稿2017/02/26 03:37

miyabi-sun

総合スコア21194

(通常ではありませんが)エレメントのロードが終わってからスクリプトが実行されるからです。
例えば

javascript
1var btn = document.getElementById('btn');

というコードを書いた<script>を<head>内に書いた場合は、btnが取得できません。(window.onloadやwindow.addEventListener('DOMContentLoaded')などイベント後は取得できる)
ただ、<head>に書いても<script defer src="hoge.js">としてdeferロードを設定した場合もエレメントのロードが終わってから実行されます。

投稿2017/02/26 01:56

編集2017/02/26 02:30

turbgraphics200

総合スコア4269

順番に読み込む関係上、DOMが出来上がっていない状態でのスクリプト実行だとタイミングが合わないことがあるからです。
外部に記述する場合は、DOMの読み込みが終わった事をトリガーに実行すれば問題ありません。
bodyの閉じタグの手前で読み込んでも良いです。

投稿2017/02/26 02:54

shaak

総合スコア607

すでに書かれていますが、script タグ自体、header タグの中、body タグの中のどこに書いても構いません。

Javascript が読み込まれている間「HTMLが読み込まれない」のではなく「レンダリングがブロックされる = script タグ以降が表示されない」というのが正しいですね。

なので、表示された後に実行されてよい script は、邪魔にならない場所に書くのが表示速度の面からはベターということになります。ページの要素の最後に書く、ということですね。

defer 属性や async 属性を与えることで、レンダリングのブロックを防ぐことは可能ですが、ブラウザによる差異があったり、読み込まれる順番が重要だったりする場合があるので使用されなかったりします。

async で非同期読込にした場合、Jquery 本体より、プラグインのほうが先に解釈されたりするとまずかったりする場合がありますね。
defer だと、ページの読み込みが完了してから script が解釈されますが、ブラウザによっては対応してなかったりします。

投稿2017/02/28 04:45

sysyz

総合スコア44

WebブラウザはHTMLファイルの上の行から順にレンダリングしていくので、処理に時間のかかるスクリプトが上の方にあると、「なかなか内容が表示されない」なんてことになるから、じゃないでしょうか。

投稿2017/02/26 01:58

tohshima

総合スコア374

仕様の話をきちんとするか、推奨される実装の話をするか、多くの実装の話をするのかで、答えが異なってきます。正確に言うと、「どこまできちんと言うか」が異なってきます。私も仕様書を読み込んでいるわけではないので、間違っているところがあるかもしれません。
きちんと書くように…と言いながら、私も、一部端折りながら書いていますし、JavaScript はほとんど扱わないので、間違っているところもあるかもしれません。

sysyz さんの回答が、技術的に正しく、まとまっていると思います。

動作理解の把握のための比較的質の良い文献が、JavaScriptの記入場所…タグ内の記述の言及があるので参考に、JavaScriptの記述場所まとめパターンの列挙、JavaScriptの読み込みにおける非同期スクリプト注入の悪影響, 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～あたりでしょうか。

本来は記述位置に依存する

まず

script タグは、そのタグがある位置によって(HTML ソースに与える)実行結果が異なる

ことは知っておかなければなりません。

document_write.js
として

JavaScript
1document.write("document write!");

があった場合、

html
1<!doctype html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title></title>
6</head>
7<body>
8<script src="document_write.js"></script>
9ABC
10<script src="document_write.js"></script>
11</body>
12</html>

は

text
1document write! ABC document write!

という出力になります。2つの "document write!" は script タグの位置に依存しています。つまり、どこに書いても良いと端的に述べてしまうのは大きな誤りなのです。

ただ、現在は document.write は非推奨になっています。「問題がある」のです。

記述位置に依存しないスクリプトが求められる

記述位置に依存するということが分かると(いなくても生じる問題もありますが)、次の問題が生じます。

script タグの JavaScript が実行されたあとでないと、「正しい」ドキュメントが得られない

例えば、document.write("<div class='script'>"); とあるのと、HTML 文書に <div class='script'> があるのとは同じレンダリング結果にならないとおかしいですね。スクリプト実行後は再度、HTML ソース全体の解析をしなければならなくなります。
これが、JavaScriptの記述場所まとめのいう、「HTMLのレンダリング前に実行する必要があ」るということです。

このような処理が多いと問題が大きいので、innerHTML や insertAdjacentHTML 他、「ブラウザが把握している HTML の構造(DOM) に手を入れるスクリプト」を「DOM が準備できた後に」実行することが増えてきました。「旧石器時代の～」に載っているようなことです。
document.getElementById("text"); を使ってあげれば「場所の指定」を「HTML ソース上の id」で指定できるので、特定の場所に特定の記述をさせることが可能になります。

その他

body タグの最後や head タグ内の最後に書く利点・理由

あとは、他の方の記述の方が分かりやすいし、詳しいでしょう。

「記述位置に依存しない」のであれば、「いつ・どのように」実行されても良いでしょう。ここで、ブラウザの HTML ソースの解釈を邪魔せず、できるだけ早くページの概況を表示させるため

body タグの最後

に書く選択肢が生まれてきます。一方で、head 内にある利点もあるのです。

(私は詳しくないが) HTMLが解析される前に実行されるべきjavascriptファイルがある…そうです
HTML ソース内の早い段階に現れるため、ブラウザは早く取得できる…body 末尾にあると、ソースを全部読み終えないと、script タグの外部ソースがあることに気づかないという問題があります。必要なスクリプトの実行開始がどんどん遅れてしまいます。
ライブラリなど、ソースファイル間には依存関係があることがある…jquery なんかはその例なのでしょうか？これは、「先に」書く必要があるため、head 内に入れておきます。

といった具合です。もう少しコントロールしたいですよね。