9

質問 1 :

JavaScript ファイルを Web ページに非同期的にロードする必要があるのはなぜですか? サーバー側でその根拠を確認できますが、クライアントにロードする必要があるすべてのファイルを知っている場合、すべてのソース ファイルを 1 つのファイルに連結してページのロード時にロードしないのはなぜですか? すべての JS ファイルを取得する際の待ち時間が原因で、将来の操作が遅くなる可能性があるほど、最初の最初のページの読み込みが重要ですか?

質問 2 :

質問 1 に対する答えが、JS ファイルを個別にロードする必要があると仮定すると、次のようになります。

AMD は各 JS ファイルを非同期で読み込みますが、CommonJS は同期で読み込みます。CJS は、サーバー側の読み込みに必要です (Node.js のしくみは、私が間違っていなければそうです)。AMDは、クライアントにより適しているようです。したがって、クライアントで CJS を使用する唯一の理由は、サーバーとコードを共有することです。

AMD と CJS を適切に再生して、クライアントの JS ファイルを非同期にロードできるようにする方法はありますか?

(require.js は正確には何をするのでしょうか? 私は一生、彼らの Web サイトの行間を読むことはできません。)

4

3 に答える 3

3

すべてのページのJavaScriptソース全体をロードする場合は、必ず1つのファイルにコンパイルしてください。ユーザーが実行するアクションに基づいて、またはロードされたページに基づいて異なるコードをロードする場合は、AMDロードモジュールを使用してください。もう1つの方法は、一連のスクリプトタグを一覧表示することです。もちろん、一度に1つしか読み込まれず、時間がかかる可能性があります。

AMDは特定のライブラリではありません。実際には、前述のローダーのほとんどが使用するjavascriptモジュールをロードするための標準です。これは、モジュールの定義とロードにすべて同様の構文を使用することを意味します。彼らはAMDをECMAスクリプト仕様の一部にすることを検討しています。依存関係を定義することもできるので、コードでjQueryを実行する必要がある場合は、これを依存関係としてリストすると、モジュールの名前空間に読み込まれます。

define( [ 'jquery' ], function ( $ ) {
    // use jquery in here without clouding up the global namespace

    return {}; // return your module for use in a different module or whatever
};

この例では、jqueryモジュールがダウンロードされるまで、定義されたモジュールのコードは実行されません。次に、jqueryモジュールを引数として新しく定義されたモジュールに直接挿入します$

これで、モジュールを含むファイルにコードをきちんと整理しておくことができます。どのモジュールもグローバル名前空間を曇らせません。モジュールが実行される前に、すべての依存関係がロードされていることを確認します(依存するコードのロード競合状態のバグはありません)。

もう1つの利点は、同じモジュールに対して異なるパスを使用するようにローダーを設定できるため、jqueryモジュールのパスを「https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/」と定義できることです。 jquery.min.js'は、ほとんどすべてのモジュールで使用されている可能性がありますが、コード内の1つの場所にあります。jqueryのバージョンを1.8.3に更新する必要がある場合、コード内の1つの場所でパスを変更するだけでjquery、依存関係として使用するすべてのモジュールにこのパスが使用されます。これは、モジュールスタブを使用しているときにテストするとき、または特定のモジュールのバージョンをデバッグするときに、簡単に切り替えるのにも役立ちます。

現在、これは小さなプロジェクトでは必ずしも必要ではありません。ただし、プロジェクトが大きくなるほど、このタイプの読み込みの意味がわかりやすくなります。

于 2012-10-02T21:25:58.647 に答える
3

ファイルを連結するだけの問題の一部は、ダウンロードに費やされる時間ではなく、すべてのページでコンパイルに費やされる時間です。

20,000 行のファイルがあり、すべてを稼働させるのに 600 行しか必要ない場合 (リソースを管理するために任意のパターンを使用して、すべてがモジュール化され非同期になるように記述されていると仮定します)、次のようにします。コア プログラムを提供し、必要に応じて拡張する場合 (または遅延タイマーで、相互に密接に関連する機能の大きなチャンクを提供する場合) は、0.5 秒以上の時間を節約できます。

ダウンロードに費やされる全体的な時間はより長くなります。
使用される HTTP 接続の総数はより多くなります。
ただし、ページをユーザーに表示するのに必要な時間は短くなります。
基本機能をページに追加するのに必要な時間は短くなります。
次に、ロードと初期化の後、またはユーザーの要求に応じてジャストインタイムで追加の機能をストリーミングできます。どちらの場合も、ストリーミングしたコードがその機能を実行することに集中している限り、他の依存関係を半ダース要求していないため、要求から機能の追加までの時間は最小限に抑えられます。

RequireJS は基本的にプロミス システムを使用します。

前もって依存関係を宣言し、すべての依存関係が処理された後に実装するコードを (コールバックとして) 渡すことができます。
これらの依存関係に依存関係がある場合、依存関係が読み込まれるまで初期化さません。
ロードするだけで順序が重要でない場合は、依存関係を与える必要はありません。

全体的な教訓は、すべてのファイルが小さいシステムを使用している場合、ページ上の JS の全体的な重量は非常に小さく、ページで必要なすべてを行うのに数百行しか必要としないということです... ...さらに、すべての依存関係がどこにあるかを知っている、サーバー上にシステムがあり、それらが正しい順序になっていることを確認するなど (さらに、優れたドキュメントを持っているか、あなただけです。誰がこのコードに触れ、あなたはそのコードの中で日々生活しています)...

作成する HTTP 要求の数がコンパイル時間よりも大きい場合、違いはまったく見られない可能性があります。しかし、数万行 (または数百行) の長さのアプリケーション全体では、その機能のほんの一部しか 1 つのページで必要とされないため、ページが読み込まれてから、アプリは、ユーザーによる基本的な対話の「準備ができています」。

于 2012-10-02T20:24:11.940 に答える
3

JavaScript ファイルを非同期的に、またはカスタム ローダーを介してロードする必要はありません。非同期ロードまたはカスタム ロードが利点を提供する場合、いくつかの理由を次に示します。

  • JavaScript ファイルが通常は必要なく、常時ではなく必要に応じてロードする場合
  • ページの初期表示にjavascriptファイルを必要とせず、ページの最初の表示速度を最大化したい場合
  • JavaScriptファイルがロードされる正確なタイミングを制御したい場合
  • 何らかの条件に基づいて、javascript ファイルをロードするかどうかを決定している場合 (たとえば、CDN からのロードに失敗した場合は、バックアップの場所からロードする可能性があります)。
  • スクリプトのロードを順次シリアライズするのではなく、他のものと並行して進めたい場合

これらの利点や、プログラムによる読み込みによって提供されるその他の利点が必要ない場合は、通常の<script>タグを使用して同期的に読み込むことができます。

于 2012-10-02T20:09:14.317 に答える