Resource Waterfall 在时间轴上绘制页面发出的每个请求，每个条都分为其实际阶段 - 排队、DNS、TCP、TLS、等待和下载 - 带有 FCP、LCP、DOMContentLoaded 和加载标记。
当一个页面感觉很慢时，问题总是相同的：它在等什么？浏览器自己的答案位于“网络”面板中，这意味着打开 DevTools，将抽屉停靠在您正在检查的页面上，然后重新加载以捕获加载的开始。
Resource Waterfall 将该时间线放置在页面旁边的浮动面板中。每个请求都显示为一个条形，按其启动时间定位，并按其实际时间进行分段：排队或停滞、DNS 查找、TCP 连接、TLS 握手、等待服务器，然后下载。长的蓝色段是慢速服务器；长的绿色的是胖文件；长的灰色表示该请求正在等待轮到。这种区别决定了您应该修复什么。
时间线上的虚线标记显示第一个内容绘制、最大内容绘制、DOMContentLoaded 和加载，因此您可以看到哪些请求在用户看到任何内容之前完成，哪些请求之后仍在进行。渲染阻塞资源和缓存命中在每一行上进行标记，并且单个阻塞过滤器将列表缩减为实际延迟第一次绘制的内容。
按类型过滤、按 URL 搜索或按最慢或最大排序，以快速找到最严重的违规者。单击任意行可查看其完整 URL、协议、传输和解码大小、状态和完整阶段细分。面板打开时到达的请求会直接流入，导出 JSON 会复制整个时间线（包括里程碑），因此可以将性能发现结果交给其他人，而无需屏幕截图。
每个栏都分为排队、DNS、TCP、TLS、等待和下载，因此可以立即区分慢速服务器、胖文件和排队请求。
FCP、LCP、DOMContentLoaded 和 load 的虚线显示哪些请求在用户看到内容之前完成，哪些请求在用户看到内容之后仍在运行。
单击一次即可将列表缩小到实际阻止第一次绘制的资源，并在摘要栏中显示总阻塞计数。
从缓存提供的资源被标记和标记，而不是显示为神秘的零字节行，因此您可以验证缓存是否确实有效。
按类型缩小范围 — 文档、CSS、JS、图像、字体、XHR、媒体 — 按 URL 搜索，或按最慢或最大排序，以便在几秒钟内找到最严重的违规者。
将整个瀑布复制为 JSON，包括里程碑、总计和每个请求阶段，以附加到票证或与以后的运行进行比较。
过滤渲染阻止资源并查看访问者和可见内容之间的确切样式表和脚本。
按最慢排序，然后观察分析、字体或聊天提供程序出现在顶部，并有一个与您的代码无关的漫长等待阶段。
阅读相位颜色：等待时间是后端或 CDN 问题，下载时间是文件大小问题。每个的修复方法都不同。
重新加载并确认资产来自缓存，并且传输大小远小于解码大小，证明压缩实际上已启用。
将时间线导出为 JSON 并将其附加到票证中，以便下一个人看到相同的数字，而不是尝试重现您的会话。
单击 DevSuite Pro 坞站中的 Resource Waterfall 图标。到目前为止页面加载的所有内容都会立即显示在时间线上。
打开面板后重新加载，以捕获第一个请求的负载，包括文档本身和绘制里程碑。
按阻塞芯片仅查看渲染阻塞资源，或选择 js 或 img 等类型。按最慢的顺序排序，将最严重的违规者排在最前面。
单击任意行即可查看其完整 URL、协议、大小、状态以及以毫秒为单位的分阶段细分 — 如果需要，请复制 URL。
导出 JSON 复制包含里程碑和总计的完整时间线，准备粘贴到票证中或保留为前后记录。
