Jqueryコードはヘッダーまたはフッターに入れる必要がありますか？
Jqueryコード（または別のJqueryファイル）を配置するのに最適な場所はどこですか？ページをフッターに配置すると、ページの読み込みは速くなりますか？
すべてのスクリプトは最後にロードする必要があります
ほぼすべての場合において、すべてのスクリプト参照をページの最後の</body>の直前に配置するのが最善です。
テンプレートの問題などが原因でそうできない場合は、HTMLのダウンロード後にブラウザがスクリプトをダウンロードできるように、defer属性でスクリプトタグを修飾します。
<script src="my.js" type="text/javascript" defer="defer"></script>
エッジケース
ただし、ページの読み込み中にページのちらつきやその他のアーティファクトが発生する可能性のあるEdgeの場合があります。これは通常、jQueryスクリプト参照を<head>タグwithoutに配置するだけで解決できますdefer属性。これらのケースには、jQuery UIと、機能の一部としてDOMを変更するjCarouselやTreeviewなどの他のアドオンが含まれます。
さらなる注意事項
ポリフィルなど、DOMまたはCSSの前にロードする必要のあるライブラリがいくつかあります。 Modernizrは、そのようなライブラリの1つです headタグに配置する必要があります 。
スクリプトによって引き起こされる問題は、並行ダウンロードをブロックすることです。 HTTP/1.1仕様では、ブラウザはホスト名ごとに2つ以下のコンポーネントを並行してダウンロードすることを提案しています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して実行できます。ただし、スクリプトのダウンロード中は、異なるホスト名であっても、ブラウザーは他のダウンロードを開始しません。状況によっては、スクリプトを下に移動するのは簡単ではありません。たとえば、スクリプトがdocument.writeを使用してページのコンテンツの一部を挿入する場合、ページの下に移動することはできません。スコーピングの問題もあるかもしれません。多くの場合、これらの状況を回避する方法があります。
しばしば出てくる別の提案は、遅延スクリプトを使用することです。 DEFER属性は、スクリプトにdocument.writeが含まれていないことを示しており、ブラウザーがレンダリングを続行できることを示しています。残念ながら、FirefoxはDEFER属性をサポートしていません。 Internet Explorerでは、スクリプトは延期される場合がありますが、必要なほどではありません。スクリプトを延期できる場合は、ページの下部に移動することもできます。これにより、Webページの読み込みが速くなります。
EDIT：Firefoxはバージョン3.6以降のDEFER属性をサポートします。
ソース：
もちろん、CDN経由でjQuery自体をヘッドにロードするだけです。
どうして？一部のシナリオでは、jQuery依存コードが埋め込まれた部分的なテンプレート（たとえば、ajaxログインフォームスニペット）を含めることができます。ページ下部にjQueryがロードされると、「$が定義されていません」というエラーが表示されます。
もちろんこれを回避する方法はあります（JSを埋め込まず、bot-load-at-botsのjsバンドルに追加するなど）が、jQuery依存コードを配置できる遅延読み込みのjsの自由を失う理由どこでもいいです？ Javascriptエンジンは、依存関係（ロードされるjQueryなど）が満たされる限り、コードがDOMのどこにあるかを気にしません。
共通/共有jsファイルの場合、はい、それらを</body>の前に配置しますが、例外では、jQuery依存のスニペットまたはファイル参照をHTMLのその時点に貼り付けるのが本当に理にかなっています。
頭にjqueryをロードしてもパフォーマンスに影響はありません。地球上のどのブラウザのキャッシュにjQuery CDNファイルがまだないのですか？
何もせずに、jQueryを頭に入れて、jsの自由を支配させてください。
Nimbuzは、関係する問題の非常に良い説明を提供しますが、最終的な答えはあなたのページに依存すると思います：ユーザーがより早く持っておくべきより重要なものは-スクリプトまたは画像ですか？
画像がなければ意味をなさないページがいくつかありますが、重要なスクリプトはほんのわずかです。その場合、スクリプトを一番下に置くのが理にかなっているので、ユーザーはより早く画像を見て、ページの意味を理解し始めることができます。他のページはスクリプトを使用して動作します。その場合、画像のある非稼働ページよりも画像のない稼働ページの方が良いので、スクリプトを先頭に置くことは理にかなっています。
考慮すべきもう1つのことは、スクリプトは通常画像よりも小さいということです。もちろん、これは一般化であり、ページに適用されるかどうかを確認する必要があります。もしそうなら、それは、私にとっては、経験則として最初にそれらを置くことの議論です（つまり、そうする正当な理由がない限り）。なぜなら、画像がスクリプトを遅らせるほど画像を遅らせないからです。最後に、スクリプトを最上部に配置する方がはるかに簡単です。スクリプトを使用する必要があるときに、それらがまだ読み込まれているかどうかを心配する必要がないからです。
要約すると、デフォルトではスクリプトを上部に配置する傾向があり、ページが完成した後にスクリプトを下部に移動する価値があるかどうかのみを検討します。それは最適化です-そして私は時期尚早にそれをしたくありません。
ほとんどのjqueryコードは、ドキュメントの準備ができた状態で実行されます。これは、とにかくページの最後まで実行されません。さらに、ページのレンダリングはjavascriptの解析/実行によって遅延する可能性があるため、すべてのjavascriptをページの下部に配置することをお勧めします。
標準的な方法では、すべてのスクリプトをページの一番下に配置しますが、ASP.NET MVCをいくつかのjQueryプラグインと共に使用します。jQueryスクリプトを<head>セクションに配置すると、すべてうまく機能することがわかります。マスターページ。
私の場合、スクリプトがページの下部にある場合、ページのロード時に発生するアーティファクトがあります。 jQuery TreeViewプラグインを使用していますが、スクリプトが最初にロードされていない場合、必要なCSSクラスがプラグインによって課されずにツリーがレンダリングされます。そのため、ページが最初にロードされたときにこの見た目がおかしくなり、その後TreeViewが適切にレンダリングされます。とても見栄えが悪い。マスターページの<head>セクションにjQueryプラグインを配置すると、この問題がなくなります。
ほとんどすべてのWebサイトは依然としてheader：DにJqueryおよびその他のjavascriptを配置していますが、stackoverflow.comを確認することもできます。
また、bodyの終了タグの前に置くことをお勧めします。いずれかの場所に置いた後、ロード時間を確認できます。スクリプトタグは、さらに読み込むためにWebページを一時停止します。
フッターにjavascriptを配置した後、javascriptをロードするまでWebページの外観が異常になる場合があるため、ヘッダーセクションにcssを配置します。
このリンク によれば、</body>が最適な場所になる直前に、それは理にかなっています。
最善の方法は、自分でテストすることです。
私にとってjQueryは少し特別です。たぶん、規範の例外です。それに依存する他の多くのスクリプトがあるので、それは非常に重要であり、それは早期にロードするので、後で来る他のスクリプトは意図したとおりに動作します。他の誰かが指摘したように、このページでさえヘッドセクションにjQueryをロードします。