web-dev-qa-db-ja.com

「Javascriptを最下部に置く」ことは、document.readyの目的に反しますか？

ページの下部にJavascriptを配置することをお勧めしますが、jQueryを使用している場合、DOMの読み込み中に実行する目的が損なわれることはありませんか？

たとえば、ドロップダウンメニューがある場合、ページの残りすべてが読み込まれるまでドロップダウンは表示されません。また、プログレッシブエンハンスメントを念頭に置いて開発しようとしています。そのため、CSSではなくjQueryで非表示になっている要素があるかもしれません（そうすれば、JS以外のユーザーでも見ることができます）。

幸せな媒体はあるのでしょうか？

javascriptperformancejquery
26
DisgruntledGoat

Document.readyは、DOMのロードを待ってからJavaScriptを実行します（http://www.learningjquery.com/2006/09/introducing-document-ready）。

一番下に配置するという考えは、JSに問題があるか、人の接続が遅い場合、ページの残りの部分が最初に読み込まれ、「ハング」しないことを意味します。

JSは、開始時でも終了時でも、すべてがロードされたときに実行されます。

30
Callan

JavaScriptを一番下に置くということは、他のページコンテンツ（特にテキスト）がJavaScriptの前にロードされるため、ユーザーが遅い接続を持っている場合にJSのロードを待たないことを意味します。

これは、ブラウザーがページのDOMの準備を完了したときに呼び出されるため、document.readyには影響しません。いずれにしても、すべてを最初にロードする必要があります。

6
Macha

スクリプトは、HTMLのロードが完了するまで実際には使用されません。スクリプトは、HTMLがロードされるまでDOMを変更できません。 document.readyは、DOMがロードされるのを待ちます。したがって、スタイルシートのような重要なものを保持する意味はありません。

ページの下部（</body>タグの前）にスクリプトを配置して、できるだけ早くHTMLとCSSをユーザーに提供するようにします。ユーザーがスクリプトのダウンロードを待つ間、空白ページをじっと見つめるのではなく、ブラウザがページをより速くレンダリングし、スクリプトをロードできるようになります。

ブラウザがページを段階的にレンダリングしている間に、スクリプトタグ（外部Javascriptファイル）にヒットした場合すべて停止。スクリプトには優先権があります-スクリプトのダウンロード中、ブラウザは他のダウンロードを開始しません。つまり、異なるホスト名であっても、画像とスタイルシート、およびその他の並行ダウンロードはブロックされます。

ページの下部にスクリプトを配置することの欠点は、スクリプトが初期化される前にページがレンダリングされるため、特にクイッククリッカーがJavascriptの準備ができる前にサイトと対話できることです。

注：逆はスタイルシート-ページの下部近くのスタイルシートは、すべてのスタイルシートがダウンロードされ、ドキュメントHEADに移動するまでプログレッシブレンダリングをブロックします問題を解消します。

ユーザーを待たせずにJavaScriptをロードするには、DOM createElement()メソッドを使用して<script/>要素を作成し、閉じる</body>の直前にページに追加することができます。鬼ごっこ：

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

ブラウザは、新しい<script/>要素が実際にページに追加されるまで、jsスクリプトのダウンロードを開始しません。ダウンロードが完了すると、ブラウザは含まれているJavascriptコードを解釈します。

3
Tom

はい。スクリプトを一番下に置くと、doc.ready（DOMContentLoadedイベント）はもう必要ありません。先のすべてのDOMが読み込まれた後にスクリプトが実行されます。

最後のスクリプトはパフォーマンスを向上させるため（HTMLの解析とCSSおよび画像の読み込みはスクリプトによってブロックされません）、doc.readyを使用する代わりに、スクリプトを下部に配置することをお勧めします。

1
Kornel