回答:
すべてのスクリプトは最後にロードする必要があります
ほぼすべての場合において、すべてのスクリプト参照をページの最後の直前に配置するのが最善</body>です。
テンプレートの問題などが原因でこれを行うことができない場合は、defer属性でスクリプトタグを装飾して、HTMLがダウンロードされた後にブラウザがスクリプトをダウンロードできるようにします。
<script src="my.js" type="text/javascript" defer="defer"></script>エッジケース
ただし、ページの読み込み中にページのちらつきやその他のアーティファクトが発生する可能性があるエッジケースがいくつかありますが、通常は属性なしで<head>タグにjQueryスクリプト参照を配置するだけで解決できます。これらのケースには、jQuery UIや、機能の一部としてDOMを変更するjCarouselやTreeviewなどの他のアドオンが含まれます。defer
その他の警告
ポリフィルなど、DOMまたはCSSの前にロードする必要があるいくつかのライブラリがあります。Modernizrは、headタグに配置する必要があるライブラリの1つです。
<head>。マークアップがコンテンツを並べ替えるjQueryプラグインに依存している場合、プラグインが読み込まれるまでWebページでファンキーなマークアップを取得するため、ページの下部にプラグイン参照を配置しても意味がありません。ルールは、機能しなくなるまで従うことを意図しており、その時点でルールを破る必要があります。
スクリプトが原因の問題は、スクリプトが並行ダウンロードをブロックすることです。HTTP / 1.1仕様では、ブラウザがホスト名ごとに並行して2つ以下のコンポーネントをダウンロードすることが推奨されています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して行うことができます。ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザは他のダウンロードを開始しません。場合によっては、スクリプトを一番下に移動するのは簡単ではありません。たとえば、スクリプトがdocument.writeを使用してページのコンテンツの一部を挿入する場合、ページの下部に移動することはできません。スコーピングの問題もあるかもしれません。多くの場合、これらの状況を回避する方法があります。
よく出てくる代替案は、遅延スクリプトを使用することです。DEFER属性は、スクリプトにdocument.writeが含まれていないことを示し、ブラウザがレンダリングを続行できるかどうかの手掛かりになります。残念ながら、FirefoxはDEFER属性をサポートしていません。Internet Explorerでは、スクリプトは延期される可能性がありますが、必要なだけではありません。スクリプトを延期できる場合は、ページの下部に移動することもできます。これにより、Webページの読み込みが速くなります。
編集： Firefoxは、バージョン3.6以降、DEFER属性をサポートしています。
出典：
もちろん、jQuery自体はCDNを介してヘッドにのみロードします。
どうして？一部のシナリオでは、jQueryに依存するコードが埋め込まれた部分テンプレート（ajaxログインフォームスニペットなど）を含めることができます。ページ下部にjQueryが読み込まれると、「$ is not defined」エラーが表示されます。
もちろん、これを回避する方法はあります（JSを埋め込まず、load-at-bottom jsバンドルに追加するなど）が、なぜjQuery依存コードを好きな場所に配置できるのか、遅延ロードされたjsの自由を失うのですか？Javascriptエンジンは、依存関係（ロードされているjQueryなど）が満たされている限り、コードがDOMのどこに存在するかを考慮しません。
共通/共有jsファイルの場合、はい、それらをの前に配置します</body>が、例外の場合は、jQueryに依存するスニペットまたはファイル参照をhtmlのその場所に直接貼り付けることがアプリケーションのメンテナンスに意味がある場合は、そうします。
頭にjqueryをロードするパフォーマンスヒットはありません。地球上のどのブラウザーがキャッシュにjQuery CDNファイルをまだ持っていませんか？
jQueryを頭にくっつけて、あなたのjsの自由を支配させましょう。
2%、たとえば、ページが初めてロードされる前に半分が離れます。この方法で1%は、訪問者を失うことになりますが、開発時間とトラブルを大幅に節約できる可能性があります。これがあなたのビジネスモデルで理にかなっているかどうかを確認してください...
Nimbuzは関連する問題の非常に良い説明を提供しますが、最終的な答えはあなたのページに依存すると思います。
画像なしでは意味をなさないページがいくつかありますが、重要ではない小さなスクリプトしかありません。その場合、スクリプトを下部に配置することは理にかなっているので、ユーザーは画像をすぐに見てページを理解し始めることができます。他のページは、スクリプトを使用して動作します。その場合は、画像のある機能しないページよりも、画像のない機能するページの方が良いので、スクリプトを先頭に置くのが理にかなっています。
考慮すべきもう1つの点は、スクリプトは通常イメージよりも小さいということです。もちろん、これは一般化されたものであり、ページに適用されるかどうかを確認する必要があります。もしそうなら、私にとって、それは経験則として最初にそれらを置くことに対する議論です（つまり、他に行う正当な理由がない限り）、それらは画像がスクリプトを遅らせるほどには画像を遅らせないからです。最後に、スクリプトを上に配置する方がはるかに簡単です。スクリプトを使用する必要があるときに、スクリプトがまだロードされているかどうかを心配する必要がないからです。
要約すると、私はデフォルトでスクリプトを上部に配置する傾向があり、ページが完了した後でスクリプトを下部に移動する価値があるかどうかのみを検討します。これは最適化であり、時期尚早に実行したくありません。
ほとんどのjqueryコードはドキュメントの準備ができて実行されますが、いずれにしてもページの終わりまで実行されません。さらに、JavaScriptの解析/実行によってページのレンダリングが遅れる可能性があるため、すべてのJavaScriptをページの下部に配置することをお勧めします。
すべてのスクリプトをページの下部に配置するのが標準的な方法ですが、私はASP.NET MVCをいくつかのjQueryプラグインで使用しており<head>、マスターのセクションにjQueryスクリプトを配置すると、すべてがうまくいくことがわかりますページ。
私の場合、スクリプトがページの下部にある場合、ページのロード時にアーティファクトが発生します。私はjQuery TreeViewプラグインを使用していて、スクリプトが最初にロードされていない場合、プラグインによって課される必要なCSSクラスなしでツリーがレンダリングされます。そのため、ページが最初に読み込まれたときに、この奇妙に見える混乱が発生し、続いてTreeViewが適切にレンダリングされます。とても見栄えが悪い。<head>マスターページのセクションにjQueryプラグインを配置すると、この問題が解消されます。
@Html.Action私のパーシャルは$ is undefined意味を与えるので、結果を出力に動的に書き込むを使用しようとしたときに、この問題に直面しました。パーシャルをロードするには、代わりに.load（ '@ Url.Action'）を使用する必要があります。しかし、これは余分な要求のために不快感を与えます。あなたの入力に基づいて、私はマスターページのRenderBody（）の上にjqueryを移動します
ほとんどすべてのWebサイトで、Jqueryとその他のJavaScriptがヘッダー：Dに配置されていますが、stackoverflow.comも確認してください。
また、ボディの終了タグの前に装着することをお勧めします。どちらの場所に置いても積載時間を確認できます。スクリプトタグは、さらに読み込むためにWebページを一時停止します。
また、フッターにJavaScriptを配置すると、JavaScriptが読み込まれるまでWebページの外観が変わってしまう可能性があるため、ヘッダーセクションにCSSを配置します。
このリンクは、Yahoo Developer NetworkのWebサイトを高速化するためのベストプラクティスに</body>よると、この直前が最適です。
最善の方法は、自分でテストすることです。
私にとって、jQueryは少し特別です。多分標準への例外。それに依存するスクリプトは他にもたくさんあるので、後でロードする他のスクリプトが意図したとおりに機能するように、早期にロードすることが非常に重要です。他の誰かが指摘したように、このページでさえヘッドセクションにjQueryをロードします。