Web サイトのパフォーマンスを改善するためのベスト プラクティスhttp://developer.yahoo.com/performance/rules.htmlで、Steve Souders は「スクリプトを一番下に移動する」という 1 つのルールについて言及しました。少し混乱します。実際、スクリプトを下部に配置しない Web ページが多いことに気付きましたが、YSlowはこれらのページに A マークを付け続けています。
では、いつ「スクリプトを一番下に置く」というルールに従う必要がありますか?
ユーザーがサイトからページを要求すると、ページの HTML がブラウザーへのストリーミングを開始します。ブラウザが外部画像、スクリプト、CSS ファイルなどのタグに遭遇するとすぐに、そのファイルのダウンロードを同時に開始します。
スクリプトをページの下部に配置すると、スクリプトは最後に読み込まれます。言い換えれば、ページ/アプリの HTML コンテンツ/構造/css/画像が最初に読み込まれ、何かがブラウザにより速く表示されます。ユーザーは、スクリプトのダウンロードが完了するのを待たなくても、アプリケーションに何かが表示されます。
ページの上部にスクリプトがあるページが依然として「A」のスコアを獲得する理由は、これが実行可能な他のパフォーマンス改善ほど重要ではないためです。
各ルールは重み付けされているため、一部のルールは他のルールよりも ySlow グレードに影響を与えます。
私はいつもスクリプトを一番下に置きます。ページの上部にスクリプトが必要な理由はほとんどありません。私が考えられる唯一の理由は、JavaScript をページ内の他のものの直前に実行する必要があるということですが、これは非常にまれです。
場合によっては、ページ内の特定の場所にスクリプトを配置する以外に選択肢がないことがあります。ただし、ページの下部にスクリプトを配置すると、ブラウザはスクリプトを処理するために JS エンジンをロードするためにレンダリングを中断せず (ループが何度も実行されている場合、コストがかかる可能性があります)、おそらく表示されます。ページの早期表示が早くなります。
コードがまだインスタンス化されていない DOM オブジェクトを参照している可能性があることは、私が考えることができる最も明白な理由です。
パフォーマンスの問題かどうかはわかりませんが (可能性はあります)、Microsoft のプレゼンテーションに出席したところ、Web スパイダーは Web ページの最初の x 文字だけを読み取ってインデックスを作成することがあるとのことでした。そのため、大量のスクリプトがある場合、コンテンツにアクセスできず、適切にインデックス化されない可能性があります (サイトのページ ランクは高くなりません)。