JavaScriptの読み込み位置に関する考察。
他にも幾つか似たような記事はあるが、自分なりにまとめてみます。
#基本構造
読み込み位置には下記の2つの位置があります。
- bodyタグの最後
- headタグ内
#最近のスタンダード
最近のスタンダードはbody末尾での読み込みらしいです。
理由は以下の様な感じ。
1. Webページの表示速度を早くするため
JavaScriptの最初に読み込むと並列読み込みの妨げになり読み込み速度が遅くなる。
2. DOMの読み込み待ちたい
DOMreadyを前提にしている処理がある場合、DOMの読み込みが完了してから実行したい。
#head内で読み込みたい
僕はスタンダードを盲信していました。
しかし、最近僕の周辺で「JavaScriptはhead内で読み込もう」という声をよく聞くようになりました。
そこで自分でもいろいろ考えてみた結果、「head内で読み込みたい」と思うようになりました。
理由は下記の通り。
1. スクロールイベントなどがあるとガクつく
DOMを読み込んでからJavaScriptを読み込むので、表示が完了してからJavaScriptが実行されるまでラグがあります。
その間にスクロールなどのイベントが作動すると、読み込みが完了していないのでアニメーションなどがうまく表示されません（メニューの固定とか）。
2. DOMreadyが必要じゃない処理もある
全ての処理でDOMreadyが必要ではないはずで、DOMが読み込まれる前に読み込みたいJavaScriptもあるはずです。
そんな時、そういうJavaScriptだけhead内で読み込むようにすると、scriptタグが分散してしまいメンテしにくくなります。
ちなみにDOMreadyが必要な処理も下記のように書くことで.readyを省略しhead内で読み込むことができます。
(function($, undefined){
//処理
}(jQuery);
第二引数にundefinedを指定することで、DOMが読み込まれていない時もエラーになりません。
3. async属性使える
HTML5ではasync属性が使えるので、簡単にスクリプトを非同期で読み込むことが出来ます。
これでレンダリング速度の問題は解決します。
#結論
head内で読み込もう。