すべての JavaScript ファイルを Web ページの下部に保持する方がよいと読みました。HTML5 ボイラープレート テンプレートは一致しているようです: http://html5boilerplate.com/
と、広く使われているようです。
私の質問は次のとおりです。まず、これには本当の根拠がありますか? Firebug でテストを行ったところ、小さな効果があるようですが、些細なことでしょうか? 画像やその他のソースは、CSS ファイルとスクリプト ファイルが読み込まれるまで読み込みを開始しないようですが、それらを一番下に貼り付けても、これにはまったく違いがないようです。
これは、ベスト プラクティスの理由から非常に重要です。
ヘッダーにスクリプトをロードすると、他のダウンロードが停止します! これにはスタイリングが含まれ、スクリプトが終了するまで画像のダウンロードも停止します。
これは、JavaScript ファイルが同期的に読み込まれるためです。
また、JavaScript ファイルをページの下部に移動しないと、読み込み中にスタイルのないコンテンツ (FOUT) が一瞬表示されることに注意してください。これは、スクリプトの読み込みが完了するまで CSS がダウンロードされないためです。
以下は、Yahoo パフォーマンス ルール 6 からの抜粋です。
スクリプトによって引き起こされる 2 つ目の問題は、並列ダウンロードのブロックです。HTTP/1.1 仕様では、ブラウザがホスト名ごとに並行して 2 つまでのコンポーネントをダウンロードすることが推奨されています。複数のホスト名からイメージを提供する場合、2 つ以上のダウンロードが並行して発生する可能性があります。(Internet Explorer で 100 を超える画像を並行してダウンロードできるようにしました。) ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザーは他のダウンロードを開始しません。
参考文献
http://developer.yahoo.com/performance/rules.html/
特にルール 6に注意してください。
私たちは最近、オフィスでこの議論をしました。このテーマについての私の意見を述べる長い記事を書きました。簡単に言えば、それは実際に何を作っているかによるということです。コンテンツ指向の Web ページの場合、一番下に配置するのが最適なようです。ただし、機能が最優先される Web アプリケーションを作成している場合は、最上位に配置することには利点があります。
JavaScript は同期的にロードされます。これを一般的に大きなファイル サイズと組み合わせると、JavaScript の同期読み込みが原因でコンテンツの読み込みが遅れます。JavaScript をページの下部に配置すると、他のすべてが最初に読み込まれ、JavaScript の読み込みによって何もブロックされなくなります。
基本的に、ブラウザーが<script>タグにヒットすると、それ<script>が読み込まれて実行されるまで、残りのドキュメントの読み込みを停止します。