chrome開発ツールで撮影したスクリーンショットのウォーターフォールダイアグラムは何を意味していますか？

Question

以下は、Chromeの開発ツールを使用してアプリケーションを実行しているときのスクリーンショットです。滝の図を理解するのを手伝ってください。緑と青の色を指します。私のアプリケーションは長い時間が経過してコンテンツをレンダリングするので、私はアプリケーションの動作を理解するためにdevツールを使いました。このダイアグラムでアプリケーションの遅延を理解できますか？

Answer 1

ホバーそれについての詳細情報を表示するには、リソースの滝の上に。ポップアップでは、各フェーズの詳細な説明が表示されます。要求をクリックすると、同じビューが専用のタブに表示されます。 View the timing breakdown of a requestを参照してください。