7

グローバルスケールのWebアプリケーションの経験が豊富な人が、私が持っているいくつかの質問、仮定、および考えられる誤解を明らかにしてくれることを願っています。

世界中に数十万人のユーザーがいて、ソースが1つの場所(たとえば中央ヨーロッパ)から提供されている架空のサイト(大量のクライアント側/動的コンポーネント)を考えてみましょう。

  1. アプリケーションが一般的なJavaScriptライブラリに依存している場合は、Google CDNから取得して、1つの縮小されたJSファイルに(すべてのアプリケーション固有のJavaScriptとともに)コンパイルするか、Google CDNとは別にロードする方がよいでしょうか?
  2. Assetic VS headjs:1つのJSファイルをロードするか、すべてのスクリプトを並列にロードする(依存関係の順に実行する)方が理にかなっていますか?

私の仮定(私を訂正してください):

人気のあるライブラリ用のGoogleなどのCDNを使用して、すべてのアプリケーション固有/ローカルJSコードを1つのファイルにコンパイルしますが、headjsを介してこれらすべてを並行してロードするのが最適のようですが、よくわかりません。サードパーティのJSとアプリケーション固有のJSを1つのファイルにサーバー側でコンパイルすると、ライブラリはおそらくユーザーのラインのどこかにキャッシュされるため、CDNを使用する目的はほとんど無効になります。

キャッシュに加えて、とにかくアプリケーションをホストしている中央サーバーよりも、GoogleのCDNからサードパーティのライブラリをダウンロードする方がおそらく速いでしょう。

人気のあるJSライブラリの新しいバージョンがリリースされ、パフォーマンスが大幅に向上した場合は、アプリケーションでテストしてから実装します。

  • すべてのJSが1つのファイルにコンパイルされている場合、アプリケーションコードが変更されていなくても、すべてのユーザーがこのファイルを再ダウンロードする必要があります。
  • サードパーティのスクリプトがCDNからロードされる場合、ユーザーはCDNから(またはどこかのキャッシュから)新しいバージョンをダウンロードするだけです。

説明されているような状況で、次の正当な心配のいずれかがありますか?

  • 一部のユーザー(またはブラウザー)は、一度に1つのホスト名に特定の数の接続しか持てないため、サードパーティのCDNから一部のスクリプトを取得すると、読み込み時間が全体的に速くなります。
  • 一部のユーザーは制限された環境でアプリケーションを使用している可能性があるため、アプリケーションのドメインはホワイトリストに登録されている可能性がありますが、CDNのドメインはリストされていません。(これが現実的な懸念である可能性がある場合、CDNからロードし、障害時に中央サーバーからロードしようとすることは可能ですか?)
4

3 に答える 3

8

すべてのアプリケーション固有/ローカル JS コードを 1 つのファイルにコンパイルする

私たちの主な目標の一部はHTTP リクエストの数を減らし、リクエストのオーバーヘッドを最小限に抑えることであるため、これは非常に広く採用されているベスト プラクティスです。

これを行わないと考えられる主なケースは、頻繁にキャッシュが無効化される可能性が高い状況、つまりコードに変更を加える場合です。ここには常にトレードオフがあります。単一のファイルを提供するとキャッシュが無効化される可能性が非常に高くなりますが、多くの個別のファイルを提供すると、空のキャッシュを持つユーザーの起動が遅くなる可能性があります。

このため、ページ固有の JavaScript を時折インライン化することは、一部の人が言うほど悪いことではありません。ただし、一般的には、JS を 1 つのファイルに連結して縮小することは、最初の優れたステップです。

人気のあるライブラリなどに Google のような CDN を使用する。

私たちが使用しているコードがかなり不変であるライブラリについて話している場合、つまり、キャッシュの無効化の対象となる可能性が低い場合、HTTP リクエストをモノリシックなローカル JS ファイルにラップして保存する方が少し有利かもしれません。これは、特定の jQuery バージョンなどに大きく依存する大規模なコード ベースの場合に特に当てはまります。このような場合、ライブラリのバージョンを上げると、クライアント アプリのコードにも大幅な変更が加えられることはほぼ確実であり、それらを分離しておく利点が失われます。

それでも、ドメイン キャップあたりの最大接続数によって過度に抑制されたくないため、要求ドメインを混在させることは重要な勝利です。もちろん、サブドメインでも同様に機能しますが、Google のドメインには Cookie がないという利点があり、おそらくクライアントの DNS キャッシュに既に存在します。

しかし、headjsを介してこれらすべてを並行してロードするのが最適なようです

JavaScript「ローダー」の新しいホストには利点がありますが、それらを使用するとページの開始に悪影響を与えることに注意する必要があります。これは、ローダーが残りのアセットを要求する前に、ブラウザーがローダーをフェッチする必要があるためです。別の言い方をすれば、空のキャッシュを持つユーザーの場合、実際のロードを開始する前に、サーバーへの完全なラウンドトリップが必要です。ここでも、「コンパイル」ステップが役に立ちます。優れたハイブリッド実装については、require.jsを参照してください。

スクリプトが UI 描画をブロックしないようにする最善の方法は、スクリプトを HTML の最後に配置することです。それらを別の場所に配置したい場合は、asyncまたはdefer属性が柔軟に対応できるようになりました。最新のブラウザーはすべてアセットを並行して要求するため、レガシー クライアントの特定のフレーバーをサポートする必要がない限り、これは重要な考慮事項ではありません。Browserscope ネットワーク テーブルは、この種の優れたリファレンスです。IE8 は予想どおり主な攻撃者であり、スクリプトが読み込まれるまで画像と iFrame のリクエストを依然としてブロックしています。3.6の時点でさえ、Firefox は iFrame 以外のすべてを完全に並列化していました。

一部のユーザーは、制限された環境でアプリケーションを使用している可能性があります。そのため、アプリケーションのドメインはホワイトリストに登録されていますが、CDN のドメインは登録されていない可能性があります。(これが現実的な懸念事項である可能性がある場合、失敗時に CDN からロードして中央サーバーからロードすることは可能ですか?)

クライアント マシンがリモート ホストにアクセスできるかどうかを調べると、常に重大なパフォーマンス ペナルティが発生します。これは、予備のコピーをロードする前に、接続に失敗するのを待つ必要があるためです。私はこれらのアセットをローカルでホストしたいと考えています。

于 2012-08-01T17:32:09.580 に答える
4
  1. 変更/依存関係/要件などの多くの理由から、多くの小さな js ファイルはいくつかの大きなファイルよりも優れています。
  2. JavaScript/css/html およびその他の静的コンテンツは、現在の Web サーバー (Apache/IIS およびその他多数) によって非常に効率的に処理されます。ほとんどの場合、1 つの Web サーバーは 1 秒あたり 100 および 1000 のリクエストを処理する能力を超えています。いずれにせよ、この静的コンテンツは、クライアントとサーバーの間のどこかにキャッシュされる可能性があります。
  3. 本番環境で使用したいコードに外部の (あなたが制御していない) リポジトリを使用することは、(私と他の多くの人にとって) NO-NO です。サイト全体の突然の壊滅的で回復不能な障害は望ましくありませんどこかで誰かが考えたりチェックしたりせずにコミットを押したという理由だけで、JavaScript の機能。
于 2012-08-01T16:56:55.940 に答える
1

すべてのアプリケーション固有/ローカル JS コードを 1 つのファイルにコンパイルし、Google のような一般的なライブラリなどの CDN を使用しますが、headjs を介してこれらすべてを並行してロードするのが最適なようです...

これは基本的に正しいと言えます。複数の外部ライブラリを 1 つのファイルに結合しないでください。お気づきのように、これにより、ユーザーのブラウザーが (個々の) リソースを既にキャッシュしているという大部分のケースが無効になるためです。

独自のアプリケーション固有の JS コードの場合、考慮する必要がある 1 つの考慮事項は、これが更新される頻度です。たとえば、まれにしか変更されない機能のコアがあり、定期的に変更される可能性のあるいくつかの小さなコンポーネントがある場合は、コアを 1 つのファイルにコンパイルする (縮小/圧縮することを意味すると想定します) だけで、サービスを提供し続けることが理にかなっている場合があります。細かいパーツをバラバラに。

JS アセットのサイズも考慮して決定する必要があります。非常に大量の JavaScriptを提供している場合 (可能性は低いですが可能です)、すべての JavaScript を 1 つのファイルに連結すると、逆効果になる可能性があります。一部のクライアント (モバイル デバイスなど) では、キャッシュする内容が非常に厳しく制限されているためです。その場合、少数の小さなアセットを提供する方がよいでしょう。

これらは、知っておくべきランダムな情報です。私が言いたかった主なポイントは、あなたの最初の本能 (上で引用したもの) が正しいアプローチである可能性が高いということです。

于 2012-08-01T17:09:52.923 に答える