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


26

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

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

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


私は逆の問題を抱えています。サイドバーを作成して配置するスクリプトがありますが、残念ながら、スクリプトが実行される前にページがレンダリングされるため、ページ要素が新しい場所に再描画されると見苦しくなります。スクリプトが完了するまでレンダリングをブロックすることはできますか、さもなければ最初のレンダリングの前にサイズと位置を実行することはできますか?

3
この質問はStackOverflowに属していませんか?
マルコデマイオ

回答:


30

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

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

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


6

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

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


3

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

ページの下部(</body>タグの前)にスクリプトを配置し、できるだけ早くHTMLとCSSをユーザーに提供するようにします。ユーザーがスクリプトのダウンロードを待機している間、ユーザーが凝視するために空白のページを残すのではなく、ブラウザはページをより速くレンダリングしてからスクリプトをロードできます。

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

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

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


ユーザーを待たせずにJavaScriptをロード<script/>するには、DOM createElement()メソッドを使用して要素を作成し、終了</body>タグの直前にページに追加できます。

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

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


1
完全に真実ではありません。スクリプトは、すべてのHTMLがロードされる前にDOMを変更する可能性があります...実際、スクリプトがページ変更する可能性があるためにブロックされているのそのためです。ただし、多くの場合、開発者はDOMがロードされるまで「動作」スクリプトを追加する必要はありません。
scunliffe

1

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.