web-dev-qa-db-ja.com

Chrome network Timing、コンテンツのダウンロードを改善する方法

Chrome DevToolsで遅いリクエストを改善するためにXHR呼び出しのタイミングをチェックしていましたが、コンテンツサイズが5 KB未満であっても、応答時間の99%がコンテンツのダウンロードに費やされていることがわかりました。アプリケーションはlocalhostで実行されています(私のローカルマシンで動作しているため、ネットワークの問題はありません)。

ただし、[XHRの再生]メニューを使用して通話を再生すると、コンテンツのダウンロード期間が2.13秒から2.11ミリ秒に大幅に減少します(下のスクリーンショットに示すように)。データはブラウザレベルでキャッシュされません。

  • コールタイミングの例 Example of Call Timing

  • 同じ例を再生 Same Example Replayed

誰かがコンテンツのダウンロードのタイミングが遅い理由とそれを改善する方法を説明できますか?

アプリケーションは、angularJSと組み合わせたASP.NET mvc 5ソリューションです。

Webサーバーの詳細:-Windows Server 2012 R2-IIS 8

よろしくお願いします!

この原因を明確に説明することはできませんが、調査できる変数をいくつか提供します。これは、何が起こっているのかを理解するのに役立つ場合があります。

キャッシング

データがブラウザレベルでキャッシュされていないとのことですが、もう一度確認することをお勧めします。なぜなら、最初のリクエストには2秒かかり、その後の繰り返しリクエストには2ミリ秒しかかからないというのは、実際にはキャッシングのように聞こえるからです。

確認方法:

  1. Networkパネルに移動します。
  2. リクエストのSize列を確認します。 from memoryまたはfrom disk cacheが表示されている場合は、キャッシュから提供されています。

size column

遅い開発サーバーまたはマシン

私の最初の考えは、開発マシンで処理できる以上の作業をしているということでした。たぶんサーバーはあなたのマシンが処理できる以上のリソースを必要とします。多分あなたは他の多くのプログラムを実行していて、あなたのメモリ/ CPUは最大になっています。

確認方法:

  1. より強力なサーバーでアプリを実行し、パターンが持続するかどうかを確認します。

フロントエンドアプリの処理が多すぎます

この最後の1つが実際に意味があるかどうかはわかりませんが、確認する価値があります。おそらく、あなたのAngularアプリは、最初のリクエスト中に膨大な量のJS作業を行っており、CPUを使い果たしています。そのため、最初のリクエストを行うと、ブラウザ全体が停止します。

確認方法:

  1. Performanceパネルに移動します。
  2. 記録を開始
  3. アプリに最初のリクエストを行わせるアクションを実行します。
  4. 録音を停止します。
  5. [〜#〜] cpu [〜#〜]チャートを確認してください。それが完全に限界に達している場合、アプリは確かに多くの作業を行っています。

CPU chart

コメントを残して、これらのいずれかが役に立ったかどうか私に知らせてください。

19
Kayce Basques