控えめなJavaScript：HTMLコードの上部または下部に<script>がありますか？

Question 1

最近、YahooマニフェストのWebサイトの高速化に関するベストプラクティスを読みました。できる限り、JavaScriptのインクルードをHTMLコードの下部に配置することをお勧めします。

しかし、正確にはいつどこで？

クローズする前</html>か後か？そして何よりも、いつ<head>セクションに配置する必要がありますか？

Question 2

本当に邪魔にならないスクリプトには2つの可能性があります。

ヘッドセクションのスクリプトタグを介して外部スクリプトファイルを含める
本文の下部にあるスクリプトタグを介して外部スクリプトファイルを含める（前</body></html>）

最初のYahooの調査では、一部のブラウザーがスクリプトタグにヒットしたときにスクリプトファイルを読み込もうとし、それが完了するまでページの残りの部分を読み込まないことが示されているため、2番目の方法はより高速になる可能性があります。ただし、スクリプトに「準備完了」部分があり、DOMの準備ができるとすぐに実行する必要がある場合は、それを先頭に置く必要がある場合があります。もう1つの問題はレイアウトです。スクリプトがページレイアウトを変更する場合、できるだけ早くロードして、ユーザーの前でページを再描画するのに長時間を費やさないようにします。

外部スクリプトサイトが別のドメイン（外部ウィジェットなど）にある場合は、ページの読み込みの遅延を回避するために、下部に配置することをお勧めします。

また、パフォーマンスの問題については、独自のベンチマークを実行します。調査が行われたときに真実である可能性があるのは、ローカルの設定やブラウザの変更によって変わる可能性があります。

Question 3

それはそれほどカットアンドドライではありません-Yahooはスクリプトを終了</body>タグの直前に置くことをお勧めします、それは空のキャッシュでページがより速くロードされるという錯覚を引き起こします（スクリプトが残りのドキュメントのダウンロードをブロックしないため）。ただし、ページの読み込み時に実行したいコードがある場合、ページ全体が読み込まれた後にのみ実行が開始されます。<head>タグにスクリプトを配置すると、スクリプトは前に実行を開始します。つまり、プライムキャッシュでは、ページの読み込みが実際より速くなります。

また、ページの下部にスクリプトを配置する特権は常に利用できるとは限りません。ライブラリまたは以前に読み込まれたその他のJavaScriptコードに依存するビューにインラインスクリプトを含める必要がある場合は、これらの依存関係を<head>タグに読み込む必要があります。

すべてのYahooの推奨事項は興味深いものですが、常に適用できるわけではなく、ケースバイケースで検討する必要があります。

Question 4

他の人が言ったように、それを閉じるbody htmlタグの前に置きます。

先日、クライアントからサイトへの電話が非常に遅いという苦情が何度もありました。ローカルで訪問したところ、1つのページを読み込むのに20〜30秒かかりました。サーバーのパフォーマンスが悪いと考えて、ログオンしましたが、WebサーバーとSQLサーバーの両方が〜0％のアクティビティでした。

数分後、Javascript追跡タグ用にリンクしていた外部サイトがダウンしていることに気付きました。これは、ブラウザがサイトのヘッドセクションのスクリプトタグにアクセスし、スクリプトファイルのダウンロードを待機していることを意味します。

したがって、少なくともサードパーティ/外部スクリプトの場合は、ページの最後に配置することをお勧めします。次に、それらが利用できない場合、ブラウザは少なくともその時点までページをロードし、ユーザーはそれを知らないでしょう。

Question 5

上記の提案に基づいて要約すると：

外部スクリプト（Googleアナリティクス、サードパーティのマーケティングトラッカーなど）の場合は、</body>タグの前に配置します。
ページのレイアウトに影響を与えるスクリプトの場合は、頭に配置します。
「dom ready」に依存するスクリプト（jqueryなど）の</body>場合、スクリプトを先頭に配置する特別な理由がない限り、前に配置することを検討してください。
依存関係のあるインラインスクリプトがある場合は、必要なスクリプトを先頭に配置します。

Question 6

スクリプトの位置をいじくり回したい場合、YSlowは、パフォーマンスを向上または低下させる場合に味を与えるための優れたツールです。javascriptを特定のドキュメント位置に配置すると、ページの読み込み時間が非常に長くなる可能性があります。

http://developer.yahoo.com/yslow/

Question 7

いいえ、それは</html>無効になるので、後にするべきではありません。スクリプトを配置するのに最適な場所は、</body>

これは基本的に、ほとんどのブラウザーが、提供したスクリプトを評価している間、ページのレンダリングを停止するためです。したがって、ページ内の任意の場所にノンブロッキングコードを配置してもかまいません（onLoadイベントバインディングは非常に高速で効果的に解放されるため、主にイベントに関数をアタッチすることを考えています）。ここでの大きなキラーは、ページの先頭にある広告サーバースクリプトを配置することです。これにより、広告が完全にダウンロードされる前にページが読み込まれなくなり、ページの読み込み時間が長くなります。

Question 8

下部に配置すると、最後に読み込まれるため、ユーザーがページを表示できる速度が速くなります。ファイナルの前にある必要がありますが</html>、そうでなければDOMの一部にはなりません。

ただし、コードがすぐに必要な場合は、頭に入れてください。

ブログウィジェットなどを下部に配置することをお勧めします。そうしないと、ウィジェットが読み込まれなくても、ページのユーザビリティに影響が出ません。