memocarilog

最近JavaScriptの読み込みや実行の記述を、ページ最後の body 終了タグ直前で行っている場合をよくみかける気がしたので、理由を調べてみました。個人的になるほどと思ったことや誤解していた事があり、常識的なところなのかもしれないですがまとめてみました。

1. Webページの表示速度を早くする

この理由は一番分かりやすく重要なところだと思います。javascriptを読み込んでいる間は、HTMLファイルの読み込みが止まってしまう為、HTMLファイルをほぼ全部読み込んで表示された後javascriptを読み込む方が表示速度が早くなります。

以下の参考サイトがとてもわかりやすいです。

2. 並列ダウンロードの妨げになってしまう

これは1.の「表示速度を早くする為」の1つを掘り下げた感じになるかもしれませんが、ブラウザ側では表示速度を上げるために、サーバーから画像等をダウンロードする際には1個1個ダウンロードするわけでなく、一度に何個かダウンロードしています。その何個か同時にダウンロードするということが出来なくなってしまう為、結果表示速度も遅くなってしまいます。

並列ダウンロードというのは以下参考サイトの「ブラウザごとの同時接続数（HTTP1.1）」の項目が図もありとても分かりやすいです。

3. jQuery のready()メソッドを書かなくてもよくなる

これは当たり前といえば当たり前なんですが、今日まで気が付きませんでした…。

jQueryのready()メソッドはページを読み込んだ時点（DOMを構築したら）プログラムを実行しなさいという、実行するタイミングを指定するメソッドで、head内でjQueryを使う時には必要な記述です。

しかし、ページ下部で jQueryを読み込んだ時には、ページは読み込まれた後なので「ページを読み込んだら実行」という指定をする必要がなくなるということですね。

ready()メソッドは、だいたい以下のように省略されていると思いますが、ページ下部に記述する場合はこの部分がいらなくなります。

■ready()省略前

jQuery(document).ready(function () { 
	… 処理内容 …
});

■ready()省略後↓↓

$(function () { 
	… 処理内容 …
});

たった、2行の事ですが書かなくてよいならそのほうがよいですね。

4. JavaScriptの読み込み位置で実行速度にそんなに差はない

ページ下部で読み込むとJavaScriptの実行速度が早い、みたいなのをどこかで見た気がしていたのですが、勘違いだったようです。以下の参考ページで、読み込み位置による速度の実験結果が掲載されていますが、速度の差はほとんどないようです。

他にも何かあるかもしれませんが、これだけみてもJavaScriptの読み込みをページ下部で読み込んだ方がメリットが大きいですね。このブログは現在JavaScriptの読み込みをheadで行っているので、位置を移動してみてどのくらい高速化できるかみてみようと思います（また後日…）。

追記：JavaScriptの読み込み位置をページ最後にしない方がよい場合

今日たまたま目にした記事でなるほどと思いましたので追記です。
スクロールをしないとコンテンツが出現しないようなサイトの作りの場合にJavaScriptをページ最後で読み込むようにすると、JavaScriptの読み込みが終わるまで、下のコンテンツへ勧めなくなってしまう為、このような作りの場合はheadで読み込むようにした方がよいですね。