Webページの下部/上部のJavaScript
私はMozilla Firefox用のプラグイン「Yslow」を使用していましたが、JavaScriptを一番下に置くべきだと教えてくれました。これは以前にも聞いたことがありますが、あまり考えたことはありません。 JavaScriptをWebページの上部に比べて下部に配置することには本当に利点がありますか？
JavaScriptを実行する前にWebページを目に見える状態でロードできるようになります。これは、ページがロードされる前に行う必要のないGoogleアナリティクスのようなものに意味があります。
また、jQuery、プロトタイプなどを調べ、DOMが完全にロードされた後にJavaScriptコードを実行する「準備完了」ハンドラーにアタッチすることもできます。これは、多くのJavaScriptコードに適した場所です。
CDNで実行していないか、別のサブドメインまたはサーバーからJSを提供していないと仮定すると、同期的にロードされ、ファイルをダウンロードするまでHTMLコンテンツを強制的に待機させます。ページの最後の</body>タグの前にJSを配置することにより、JavaScriptをロードする前にHTMLを解析できます。 これにより、ページの読み込み時間が短縮されます。
静的なhtmlコンテンツと多くのJavaScriptを使用している場合、htmlが最初に読み込まれ、ユーザーに見たいものが与えられるため、ページの読み込み時間に違いが生じる可能性があります。 JavaScriptがあまりない場合、または既存のページコンテンツが有用であるためにJavaScriptに依存している場合、これは実用的に言えば有用ではありません。
このトピックを更新したいのですが、最近グーグルが非同期を導入しました http://support.google.com/analytics/bin/answer.py?hl=ja&answer=1008080&rd=1 たとえば、サイトに追加するGoogle統計のサポート。最高のパフォーマンスを得るには、<head>セクションの下部に配置する必要があります。ポイントは、これにより、ユーザーがページを離れる前に送信される追跡ビーコンのフードが増加する可能性があることです。
また、Googleアナリティクスを使用してGoogleウェブマスターツールでサイトを確認する場合は、そこに配置する必要があります。
それ以外は、基本的に同じルールが適用されます-ページの「高速」ロードのための下部のJavaScript。 JavaScriptが終了するまで完全にロードされたページをカウントしないため、引用符を使用しました;-)
はい、ページはコンテンツをロードし、JavaScriptをロードして実行する前にレンダリングします。その結果、ページはより高速にロードされます。
[〜＃〜] top [〜＃〜]
JavaScriptをページの上部に配置すると、ブラウザはマークアップ、画像、テキストの前にJSファイルの読み込みを開始します。また、ブラウザーはJavaScriptを同期的にロードするため、JavaScriptのロード中は他に何もロードされません。そのため、JavaScriptの読み込み中にユーザーに空白ページが表示される数秒の時間枠があります。
[〜＃〜] bottom [〜＃〜]
一方、JavaScriptをページの下部に配置すると、ユーザーには最初にページが読み込まれ、その後JavaScriptがバックグラウンドで読み込まれます。たとえば、CSSとHTMLの読み込みに5秒かかり、JavaScriptがさらに5秒かかる場合、JavaScriptをページの一番上に置くと、ユーザーに「知覚された」読み込み時間10秒が与えられ、下部の「知覚」ロード時間は5秒です。
Demian Labs から取得。
スクリプトをコンパイルすると表示が遅くなるため、要素の下部にスクリプトを配置すると表示速度が向上します。
すべてのDOM要素を完全にロードしてから、それらに対応するJavaScriptをロードできます。この標準もVisual Studioの一部です。
はい、ページの下部にjavascriptを含めると、ページの読み込みが本当に速くなります。ブラウザは物事を同期的に実行するため、ページの上部に配置されている場合、ページの読み込みに影響します。ページの下部に配置されている場合、ブラウザがjavascriptの読み込みを開始するまでに、ページはマークアップ全体を読み込み、ユーザーにより良いエクスペリエンスを提供します。