jQuery：ページの下部に外部JSがある場合、なぜdocument.readyを使用するのですか？

Question 1

ページの一番下に読み込まれる外部ファイルとして、すべてのJSを含めています。これらのファイル内には、そのように定義されたいくつかのメソッドがあり、readyイベントから呼び出します。

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

ただし、ready関数を削除してメソッドを直接呼び出すと、すべてが同じように機能しますが、実行速度は大幅に速くなります。かなり基本的なファイルでは、ほぼ1秒速くなります。この時点でドキュメントをロードする必要があるため（すべてのマークアップはスクリプトタグの前に来るため）、readyイベントを引き続き使用する正当な理由はありますか？

Question 2

素晴らしい質問です。

「スクリプトをページの下部に配置する」というアドバイス全体と、それが解決しようとしている問題については、混乱が生じています。この質問では、ページの下部にスクリプトを配置することがパフォーマンス/ロード時間に影響するかどうかについては説明しません。$(document).ready ページの下部にもスクリプトを配置する場合に必要かどうかについてのみ説明します。

スクリプトですぐに呼び出す関数（documentまたはのような単純なものdocument.getElementById）でDOMを参照していると想定しています。また、これらの[DOM参照]ファイルについてのみ質問していると仮定します。IOW、ライブラリスクリプト、またはDOM参照コードに必要なスクリプト（jQueryなど）は、ページの前半に配置する必要があります。

質問に答えるには：ページの下部にDOM参照スクリプトを含める場合、いいえ、必要ありません$(document).ready。

説明：経験則のような関連する実装の助けを借りずに：ページ内のDOM要素と相互作用するコードは、参照する要素よりもページのさらに下に配置/含める必要があります。最も簡単な方法は、閉じる前にそのコードを配置することです。こことここを参照してください。また、IEの恐ろしい「操作が中止されました」エラーを回避します。"onload"$(document).ready</body>

そうは言っても、これは決しての使用を無効にするものではありません$(document).ready。ロードされる前にオブジェクトを参照することは、DOM JavaScriptを開始するときに最もよくある間違いの1つです（数え切れないほど何度も目撃しました）。これはjQueryの問題に対する解決策であり、参照するDOM要素に対してこのスクリプトがどこに含まれるかを考える必要はありません。これは開発者にとって大きな勝利です。それは彼らが考えなければならないことのほんの1つ少ないことです。

また、すべてのDOM参照スクリプトをページの下部に移動することは困難または非現実的であることがよくあります（たとえば、document.write呼び出しを発行するスクリプトはそのままにしておく必要があります）。また、テンプレートをレンダリングしたり、動的なJavaScriptの一部を作成したりするフレームワークを使用している場合もあります。このフレームワーク内では、jsの前に含める必要のある関数を参照します。

最後に、これはすべてのDOM参照コードを詰め込むための「ベストプラクティス」でしたが、十分なドキュメント上の理由からwindow.onload、$(document).ready実装によって隠されています。

これらすべてが、$(document).readyDOM要素の参照が早すぎるという問題に対するはるかに優れた実用的で一般的な解決策になります。