[解決済み] jQuery: ページの下に外部JSがある場合、なぜdocument.readyを使用するのですか？

質問

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

var SomeNamepsace = {};

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

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

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

しかし、ready 関数を削除してメソッドを直接呼び出すと、すべてが同じように動作し、実行速度も大幅に速くなります。ドキュメントはこの時点で読み込まれるはずなので (すべてのマークアップが script タグの前に来るので)、ready イベントをまだ使用する正当な理由があるのでしょうか?

どのように解決するのですか?

いい質問ですね。

ページの一番下にスクリプトを配置する」というアドバイス全体と、それがどのような問題を解決しようとするのかについて、いくつかの混乱があります。この質問では、ページの下部にスクリプトを配置することがパフォーマンスやロードタイムに影響するかどうかについては話すつもりはありません。私が話すつもりなのは、あなたが $(document).ready が必要かどうかについてだけ話します。 .

スクリプトですぐに呼び出しているこれらの関数で DOM を参照しているものと思われます（たとえば document または document.getElementById ). また、これらの[DOM参照]ファイルについてだけ尋ねているのだと思います。つまり、ライブラリ スクリプトまたは DOM 参照コードが必要とするスクリプト (jQuery など) は、ページ内のより早い段階に配置する必要があります。

あなたの質問に答えるために : もしあなたがDOM参照スクリプトをページの一番下に含んでいるなら、 いいえ、必要ありません。 $(document).ready .

説明 : なし の助けを借りずに "onload" -のような関連する実装を $(document).ready 経験則によれば、ページ内の DOM 要素と相互作用するコードは、それが参照する要素よりもさらに下に配置/インクルードされるべきです。最も簡単なのは、そのコードを閉じる </body> . 参照 をご覧ください。 と はこちら . また、IEの恐ろしい 操作が中断されました。 .

とはいえ、これは決して $(document).ready . ロードされる前にオブジェクトを参照することは、DOM JavaScript を始めるときに最もよくある間違いのひとつです（数え切れないほど目撃しました）。この問題に対するjQueryの解決策は、このスクリプトが参照するDOM要素に対してどこに含まれるかを考える必要がないことです。これは、開発者にとって大きなメリットです。開発者が考えなければならないことが 1 つ減っただけなのです。

また、DOM を参照するすべてのスクリプトをページの一番下に移動することは、しばしば困難か非現実的です (たとえば、すべてのスクリプトが document.write を発行するスクリプトはそのままでなければなりません）。また、テンプレートをレンダリングするフレームワークを使用していたり、動的な javascript の一部を作成している場合、その中に含まれる必要がある関数を参照するために の前に js の前に含める必要がある関数を参照しています。

最後に、以前は DOM を参照するすべてのコードを、quot; best practice" として window.onload に詰め込むのがベストプラクティスでしたが、現在では $(document).ready の実装に取って代わられました。 の実装に取って代わられました。 .

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