26

大規模な Web サイトで、requireJS は実際にどのくらい高速ですか?

非同期読み込みを使用する場合としない場合の比較で、大規模な Web サイトの速度をテストした人はいますか?

たとえば、多数のビュー (> 100) で Backbone を使用する場合、一度にすべてのビューをロードしていつでも使用できるようにするビュー オブジェクトを用意する方がよいでしょうか、それとも必要に応じてすべて非同期でロードする必要がありますか?

また、モバイルとデスクトップでこれらの考慮事項に違いはありますか? サイズではなく、モバイルでのリクエストの数を制限したいという話を聞きました。

4

2 に答える 2

68

require.jsの意図が、本番環境ですべてのスクリプトを非同期にロードすることだとは思いません。開発では、各スクリプトの非同期読み込みは、プロジェクトに変更を加えて「コンパイル」手順なしで再読み込みできるため便利です。ただし、実稼働環境では、 r.js オプティマイザーを使用して、すべてのソース ファイルを 1 つ以上のより大きなモジュールに結合する必要があります。大規模な webapp がモジュールのサブセットの読み込みを後で (たとえば、特定のユーザー アクションの後) 延期できる場合、これらのモジュールは個別に最適化され、本番環境で非同期に読み込まれます。

単一の大きな JS ファイルと複数の小さなファイルの読み込み速度については、一般的に次のようになります。

「HTTP リクエストを減らす」は、フロントエンドのパフォーマンスを高速化するための一般的な格言になりました。これは、今日のモバイル ブラウザーの世界 (ブロードバンド接続よりも桁違いに遅いネットワークで実行されることが多い) では、さらに重要な問題です。 [参照]

ただし、次のような考慮事項もあります。

  • モバイル キャッシュ: iPhone はキャッシュするファイルのサイズを制限しているため、大きなファイルを毎回ダウンロードする必要がある場合があり、多くの小さなファイルをより適切に使用できます。
  • CDN の使用法: jQueryなどの一般的なサードパーティ ライブラリを使用する場合は、サイトのユーザーが別の Web サイトのキャッシュに既にライブラリを持っている可能性があるため、大きな単一の JS ファイルに含めずに CDN からロードすることをお勧めします (参照）。詳細については、以下の更新を参照してください
  • 遅延評価: AMD モジュールは、モジュールが必要になるまで解析と評価のコストを延期しながら、アプリのロード時にダウンロードできるように遅延解析および評価できます。この記事と、それが参照している他の一連の古い記事を参照してください。
  • ターゲット ブラウザ: ブラウザは、ホスト名ごとの同時ダウンロード数を制限します。たとえば、IE 7 は、特定のホストから同時に 2 つのファイルのみをダウンロードします。その他は4個まで、その他は6個まで。[参考]

最後に、Steve Souders による優れた記事で、多数のスクリプト ロード テクニックをまとめています。

更新: CDN の使用について: Steve Soudersは、多くの考慮事項、長所と短所を特定する、サードパーティ ライブラリ (jQuery など) の CDN の使用に関する詳細な分析を投稿しました。

于 2012-07-19T14:33:54.290 に答える
9

この質問は今では少し古いですが、私の考えを追加できると思いました。

r.jsを使用してすべてのコードを本番用に結合するという rharperに完全に同意しますが、機能を分割する場合もあります。

シングル ページ アプリの場合、すべてをまとめることは理にかなっていると思います。インページ インタラクションを持つ大規模で従来型のページ ベースの Web サイトの場合、これは非常に面倒であり、多くのユーザーに対して不要なコードを大量にロードすることになります。

私が数回使用したアプローチは

  • コア モジュールを定義します (適切に動作するためにすべてのページで必要です)。これは 1 つのファイルに結合されます。
  • DOM の依存関係とモジュールへのパスを理解するモジュール ローダーを作成する
  • on doc.ready は、特定のページの必要に応じて拡張機能に必要なモジュール ローダーと非同期ロード モジュールをループします。

ここでの利点は、最初のページの重量を抑え、追加のスクリプトがページの読み込み後に非同期で読み込まれるため、知覚されるパフォーマンスが速くなることです。とはいえ、この方法でロードされたすべての機能は、ロードが遅い場合やエラーが発生した場合でも基本的な機能を引き続き使用できるように、プログレッシブ エンハンスメント (つまり、フォームの ajax) としてアプローチする必要があります。

于 2013-02-27T10:27:32.663 に答える