瀑布分析
瀑布分析是检查所有用户操作详情的绝佳工具。瀑布图提供了对加载页面所需资源列表及每项资源所耗时间的宝贵洞察。它让您能够看到页面是如何加载的,以及哪些请求耗时最长,从而帮助您找准该页面性能优化的方向。
查看瀑布分析指标
查看所选网页的瀑布分析指标:
- 登录您的 Site24x7 Web 客户端。
- 前往 RUM > 您的应用程序 > 瀑布分析。

筛选器
您可以从网页下拉菜单中选择要分析的网页,并从分析时间范围下拉菜单中选择时间段(15 分钟、30 分钟、1 小时和 2 小时)。
根据所选的分析时间范围,主时间轴栏上会出现一条绿线(选择线),允许您选择数据的起止时间。
缩略图
缩略图包含一个主时间轴栏,允许您选择需要瀑布指标的确切时间。要选择时间范围,请沿主时间轴拖动绿线。

数据洞察
捕获的洞察分类如下:

| 洞察类型 | 指标 | 描述 |
| 资源洞察 | 未压缩资源 | 压缩比为 1 的资源(解码大小/编码大小)。 |
| 资源大小 > 100KB | 大于 100KB 的资源。 | |
| 极少出现的资源 | 出现在少于 5% 的页面加载中的资源。 | |
| 平均传输大小 | 加载页面时传输的资源平均大小。 | |
| 慢速资源 | 响应时间超过 200 毫秒的资源。 | |
| HTTP 调用数 | HTTP 调用的次数。 | |
| 域洞察 | 第一方域 | 联系的第一方域总数。 |
| 第三方域 | 联系的第三方域总数。 | |
| CDN 域 | 联系的 CDN 域总数。 | |
| 第一方资源 | 直接从用户收集的资源总数。 | |
| 慢速资源 | 从外部服务器或供应商收集的资源总数。 | |
| Web Vitals 洞察 | LCP | 视口中最大图片、文本或其他 DOM(文档对象模型)节点的渲染时间。 |
| FCP | 视口中第一个图片、文本或其他 DOM(文档对象模型)节点的渲染时间。 | |
| CLS | 用于评估页面视觉稳定性的布局偏移分数总和。 | |
| FID | 浏览器对点击、轻触等用户交互的响应时间。 |
主时间轴
瀑布图显示了加载页面所发出的请求列表及每个请求所耗时间。通过这些时间轴条,您可以轻松识别耗时最长的请求。

URL:请求按其调用顺序显示。
大小:每个请求的大小。
响应时间:请求响应用户操作所花费的时间。
- 默认显示所有请求。您可以通过勾选或取消勾选顶部的所需请求类型来管理,例如 CSS、HTTP 调用、字体、JS、媒体、文档和其他。
- 颜色编码的条形图表示时间细分,每种颜色有其含义。
阻塞时间:请求在发出之前等待的时间量。
DNS 时间:完成所请求资源的域名查找所需的时间。
SSL 时间:请求执行 SSL 握手所花费的时间。
连接时间:建立传输连接所需的时间。
服务器时间:应用程序后端提供所请求资源所需的时间。
下载时间:下载所请求内容所需的时间。减少传输的总字节数将对下载时间产生直接影响。
其他:来自第三方域的其他资源加载所需的时间。
跨域资源时序限制
Resource Timing API 收集网站资源加载时间的数据。然而,由于 Web 浏览器对脚本施加的跨域安全限制,它在收集其他网站数据方面存在限制。
例如,如果您的 Web 应用程序托管在 www.zylker.com 上,并使用来自 videos.zylker.com 的视频,则默认情况下,时序信息(大小和响应时间)只对从 www.zylker.com 加载的资源可用,而不适用于从 videos.zylker.com 加载的资源。
因此,您将无法获取这些请求的数据,如下方截图所示。

如何解决此问题?
要克服此限制,您可以通过在这些资源的 HTTP 响应头中添加名为 Timing-Allow-Origin 的特定标头来启用跨域资源的数据收集。
例如,如果您想允许任何网站访问资源时序,可以使用 Timing-Allow-Origin: *。
如果您想在 MDN Web 文档上了解更多关于 CORS 的信息,请点击这里。
