JavaScriptの埋め込み場所について

JavaScriptの埋め込み場所についてです

JSでDOMの操作をしたい場合対象となるhtmlの要素を読み込んだあとでないと動作しないと思います。

そこで、HTML内の最後の方に書こうと思ったのですが、</body>の直前に書いても直後に書いても動作しました。

簡単にググってみたところ、</body>の直前に書くと書いてあったのですが、実際のところどこに記入するのが適切なのでしょうか。

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

回答5件

ベストアンサー

何を重視したいかで決まります。

HTML構造の綺麗さを重視: JSはhead内に全て設置
パフォーマンスを重視: JSは</body>の直前に全て設置

インターネット上には回線速度やマシンスペックが速い人も遅い人も居ます。
特にスマホユーザーは多くのケースで回線速度やマシンスペックが低速になってしまいます。
パフォーマンスを重視する為に</body>直前に設置する事が基本です。

対するheadに設置する主張は、CSSやメタ情報等と同じ位置にあり統一感が取れていることですね。

何故構造と速度で分けたか？

理由としては、JavaScriptはダウンロードから実行完了まで描画が停止します。
その為Googleの検索エンジンでは「head要素内にJavaScriptは入れないでください」とアナウンスしています。
アナリティクス等のコードも「</body>タグの直前に挿入してください」という一文があり徹底しています。

JSでDOMの操作をしたい場合対象となるhtmlの要素を読み込んだあとでないと動作しないと思います。

その通り！

DOMツリー構造が読み込まれる前なので、先に書いても期待通りの動作はされません。
しかしJavaScriptはイベント駆動で動作しており、ブラウザが発行する様々なイベントをトリガーに関数を実行することが可能です。

その中には「DOMツリー構造をブラウザが全て読み終わった」というイベントも用意されています。
下記のような記述のスクリプトを見たことはありませんか？

JavaScript
1function fn () {
2  // DOMを読み終わってから実行してほしい処理
3}
4document.addEventListener("load", fn);
5
6// fnは1度きりの使い捨て関数なのでこのように書いても良い
7document.addEventListener("load", function () {
8  // DOMを読み終わってから実行してほしい処理
9});
10
11// document.addEventListenerは超長いので、jQueryでは下記の書き方を推奨
12// jQueryを使う場合は是非
13$(fn);
14$(function () {
15  // DOMを読み終わってから実行してほしい処理
16});

これならばhead要素内にJSを設置してもDOMツリー構造を解析するまで処理が遅延されます。

【追記】おまけ: 速度を犠牲にせず、headに設置できないか？

結論から言えば可能です。
例えばあまりの速さで大騒ぎになってるdev.toというサイトでは、
headタグ内に全てのscriptタグが設置されています。

GoogleのPageSpeed Insightsでは
head要素内に設置したscriptタグは減点扱いになりますが、dev.toは減点されてません。
なぜ？Googleにお金払ったから？

HTML5で実装されたasyncという属性を利用しています。
この属性が付与されたscriptタグはDOMの読み込みを停止することなく裏で読み込み続けてくれます。
（デメリットもあります。詳しくはコメント欄へ）

他にも最近ではSPA(シングルページアプリケーション)という
JavaScriptで画面全ての面倒を見るWebアプリが増えています。
その場合ODMツリーを先に描画しようがしまいがあまり関係なくなってしまいますね。

とりあえずは</body>の直前が好ましいと覚えておくと良いでしょう。
ただし、フロントエンド技術者としての技術力が十分にあればhead内に設置してあっても構いません。
色々調べてみたり試してみてください。

投稿2017/11/17 03:52

編集2017/11/17 06:34

miyabi-sun

総合スコア21158

miyabi-sun

2017/11/17 04:55

因みにHTML5でスクリプトタグが遅延実行する属性が実装されましたが、各種ライブラリの読み込みも遅延されて、どのスクリプトが先に実行されるのか制御出来ません。例えばjQueryのライブラリは100KBもあり、大抵の自作スクリプトの方が先に読み込まれますが、自作スクリプトはDOMツリーが構築されてから動作したいので、 $(fn)と書いた瞬間、$が宣言されてないエラーで落ちるというケースが考えられます。 jQuery等の依存ライブラリを全てまとめて1個のJSファイルにする等の対策が必要となります。

hi_se_pr

2017/11/17 06:33

大変丁寧でわかりやすい解説ありがとうございます！！自由度を増やすために１つの操作に対して複数のアプローチがあるのはわかっていても全体像が見えてこないとなかなか適切な選択をするのが難しいですね。。。コピペなどの単純なコーディングだけでなく広く深く知識をつけて最適なコーディングができるように勉強頑張ろうと思います。

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

許可された内容ひとつの <head> 要素と、それに続くひとつの <body> 要素。

html 要素

なので、「</body>の直後」は仕様違反です。

投稿2017/11/17 03:04

Lhankor_Mhy

総合スコア36115

hi_se_pr

2017/11/17 06:27

回答ありがとうございます。どちらでも実行できてしまったのですが、仕様でそう定められているなら守らなければなりませんね。

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

普通は外部ファイルに書いてhead内で読み込みます。
ようはdomの処理後に発生すればよいのですから

javascript
1window.addEventListener('DOMContentLoaded', function(){
2 初期処理;
3});

（もしくはwindow.onload=function(){}）
とすればどこからよんでも問題ありません

また、呼び出すタイミングで処理がされるので初期処理以外たとえば
関数内から呼び出すquerySelectorやgetElement(s)By・・・などは
影響をうけません。

投稿2017/11/17 02:59

yambejp

総合スコア114843

例えば、

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <script>
let d = document.getElementById('t1');
alert(d.value);
    </script>
  </head>
  <body>
    <input id='t1' type='text' value='hello' />
  </body>
</html>

↑これだとalertが出ませんが、

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <script>
window.onload=function(){
  let d = document.getElementById('t1');
  alert(d.value);
}
    </script>
  </head>
  <body>
    <input id='t1' type='text' value='hello' />
  </body>
</html>

↑こうするとalertが出ますね。
DOMの解析が終わってるので。

投稿2017/11/17 03:04