使用 chrome 开发工具截取的给定屏幕截图中的瀑布图是什么意思？

Question

下面给出的是 运行 我的应用程序在 chrome 中使用开发工具截取的屏幕截图。请帮助我理解瀑布图。绿色和蓝色指的是什么。我的应用程序在长时间延迟后呈现内容，因此我使用开发工具来了解我的应用程序行为。我能否通过这张图了解我的应用程序造成的延迟？

Answer 1

将鼠标悬停在资源的瀑布上可查看有关它的更多信息。弹出窗口为您提供每个阶段的详细说明。单击请求以在专用选项卡中打开相同的视图。参见 View the timing breakdown of a request。