web-dev-qa-db-ja.com

「スクリプトを一番下に置く」は正しいですか?

Webサイトのパフォーマンスを改善するためのベストプラクティス http://developer.yahoo.com/performance/rules.html で、Steve Soudersは「スクリプトを最下部に移動する」という1つのルールに言及しました。少し混乱します。実際、スクリプトを下部に配置しない多くのWebページに気づきますが、 YSlow はこれらのページのAをマークします。

それで、「スクリプトを最下部に置く」というルールに従う必要があるのはいつですか?

44
Morgan Cheng

ユーザーがサイトからページをリクエストすると、ページのHTMLがブラウザへのストリーミングを開始します。ブラウザが外部画像、スクリプト、CSSファイルなどのタグに遭遇するとすぐに、ブラウザはそのファイルのダウンロードを同時に開始します。

スクリプトをページの下部に配置すると、最後に読み込まれます。言い換えると、あなたのページ/アプリのHTMLコンテンツ/構造/ css /画像が最初にロードされ、何かがブラウザに速く表示される可能性があります。ユーザーは、アプリケーションに何かが表示される前に、スクリプトのダウンロードが完了するのを待つ必要はありません。

31
Alan Storm

ページの上部にスクリプトがあるページでも「A」のスコアが付けられる理由は、これは他のパフォーマンス改善ほど重要ではないためです。

各ルールは重み付けされているため、一部のルールは他のものよりもySlowグレードに影響を与えます。

スクリプトは常に一番下に配置します。ページの上部にスクリプトが必要になる理由はほとんどありません。私が考えることができる唯一の理由は、JavaScriptがページの他の何よりも先に即時を実行する必要があることです。これは非常にまれです。

14
Ryan Doherty

場合によっては、ページ内の特定の場所にスクリプトを配置するしかありません。ただし、ページの下部にスクリプトを配置すると、ブラウザはレンダリングを中断せずにJSエンジンをロードしてスクリプトを処理し(ループが何度も実行されている場合はコストがかかる可能性があります)、おそらく表示されますページの早期表示。

8
Mehrdad Afshari

パフォーマンスの問題かどうかはわかりませんが、Microsoftからのプレゼンテーションに参加していました。発表者は、WebスパイダーがWebページの最初のx文字だけを読み取ってインデックスを作成する場合があると述べました。そのため、スクリプトが大量にある場合、コンテンツにアクセスできず、適切にインデックスが作成されない可能性があります(サイトのページランクはそれほど高くありません)。

6
Mark Carpenter

コードはまだインスタンス化されていないDOMオブジェクトを参照する可能性がありますが、これは私が考えることができる最も明白な理由です。

6
dkretz