跳到主要内容

页面

页面分析提供应用中所有页面的性能分析数据，并可对每个页面的性能进行表现评价、趋势图和分位图分析、地域分析、汇总瀑布图分析和页面详情追踪。

功能概览​

过滤条件​

您可以按以下维度进行过滤：

  • 设备名称
  • 设备型号
  • App版本
  • 操作系统
  • 操作系统主版本
  • 浏览器名称
  • 浏览器主版本
  • 地域
  • 运营商
  • 接入方式

指标分析​

展示了过滤条件下页面加载性能指标的趋势图：

  • 支持根据需要对性能指标过滤分析
  • 耗时类性能指标支持多种统计方式：
    • 平均值
    • P50
    • P75（默认）
    • P95
    • P99

维度分析​

以地域来展示页面加载性能的分布情况：

  • 地图可以进行下钻，支持下钻到省/州
  • 地图下钻后，过滤条件中会添加相应地域进行过滤
  • 页面所有模块展示过滤条件后的性能数据
  • 您可以在左侧筛选页面加载性能指标来分析其在不同地域的表现情况
  • 列表支持自定义表头

关系​

展示Web页面加载与后端服务的完整链路，帮助分析性能瓶颈。

数据视图​

页面视图​

默认选中页面卡片，底部展示页面性能数据列表，列表展示数据包括：

  • Web页面
  • 访问次数
  • 活跃设备数
  • TTFB（Time to First Byte）
  • FCP（First Contentful Paint）
  • LCP（Largest Contentful Paint）
  • FID（First Input Delay）
  • CLS（Cumulative Layout Shift）
  • 完全加载
  • TTI（Time to Interactive）
  • TBT（Total Blocking Time）
  • DomContentLoaded
  • LoadEventEnd
  • JS错误率
  • 慢页面次数
  • 慢页面占比
  • 页面_别名（可以在实体管理中为页面添加别名）

点击列表中的页面，进入到页面详情，详情展示了该页面的详情数据。

请求接口视图​

选中请求接口卡片，底部展示「mime-type 为 text 或 json」请求数据列表，列表展示数据包括：

  • HTTP请求
  • 请求次数
  • 请求耗时
  • 每分钟请求次数
  • 请求错误率
  • HTTP错误率
  • 网络错误率
  • 服务端链路追踪耗时
  • 慢请求次数
  • 慢请求占比
  • 服务端链路追踪错误率
  • 上行流量消耗
  • 下行流量消耗
  • 可用性

点击HTTP请求，进入到请求详情分析，详情分析展示了该HTTP请求详情数据。

资源接口视图​

选中资源接口卡片，底部展示资源请求数据列表，列表展示数据包括：

  • HTTP请求
  • 请求次数
  • 请求耗时
  • 每分钟请求次数
  • 请求错误率
  • HTTP错误率
  • 网络错误率
  • 服务端链路追踪耗时
  • 慢请求次数
  • 慢请求占比
  • 服务端链路追踪错误率
  • 上行流量消耗
  • 下行流量消耗
  • 可用性

点击HTTP请求，进入到请求详情分析，详情分析展示了该HTTP请求详情数据。

服务视图​

选中服务卡片，底部展示后端服务列表「需后端嵌入基调听云APM探针」，列表展示数据包括：

  • 后端服务
  • 请求次数
  • 每分钟请求次数
  • 服务端链路追踪错误率

页面详情分析​

过滤条件​

您可以按以下维度进行过滤：

  • 设备名称
  • 设备型号
  • App版本
  • 操作系统
  • 操作系统主版本
  • 地域
  • 运营商
  • 接入方式

指标分析​

展示了过滤条件下页面性能加载指标的趋势图：

  • 支持根据需要对性能指标过滤分析
  • 耗时类性能指标支持多种统计方式：
    • 平均值
    • P50
    • P75（默认）
    • P95
    • P99

维度分析​

以地域来展示页面加载性能的分布情况：

  • 地图可以进行下钻，支持下钻到省/州
  • 地图下钻后，过滤条件中会添加相应地域进行过滤
  • 页面所有模块展示过滤条件后的性能数据
  • 您可以在左侧筛选页面加载性能指标来分析其在不同地域的表现情况
  • 列表支持自定义表头

关系拓扑​

展示应用单一页面加载与后端服务的完整链路，帮助分析性能瓶颈。

请求接口分析​

选中请求接口卡片，底部展示「mime-type 为 text 或 json」请求数据列表，列表展示数据包括：

  • HTTP请求
  • 请求次数
  • 请求耗时
  • 每分钟请求次数
  • 请求错误率
  • HTTP错误率
  • 网络错误率
  • 服务端链路追踪耗时
  • 慢请求次数
  • 慢请求占比
  • 服务端链路追踪错误率
  • 上行流量消耗
  • 下行流量消耗
  • 可用性

点击HTTP请求，进入到请求详情分析，详情分析展示了该HTTP请求详情数据。

资源接口分析​

选中资源接口卡片，底部展示资源请求数据列表，列表展示数据包括：

  • HTTP请求
  • 请求次数
  • 请求耗时
  • 每分钟请求次数
  • 请求错误率
  • HTTP错误率
  • 网络错误率
  • 服务端链路追踪耗时
  • 慢请求次数
  • 慢请求占比
  • 服务端链路追踪错误率
  • 上行流量消耗
  • 下行流量消耗
  • 可用性

点击HTTP请求，进入到请求详情分析，详情分析展示了该HTTP请求详情数据。

服务分析​

选中服务卡片，底部展示后端服务列表「需后端嵌入基调听云APM探针」，列表展示数据包括：

  • 后端服务
  • 请求次数
  • 每分钟请求次数
  • 服务端链路追踪错误率

单样本详情​

详情列表展示选中页面所有单样本详情数据，列表展示数据包括：

  • timestamp「发生时间」
  • 终端用户唯一标识
  • URL全路径
  • 会话ID
  • TTFB
  • DomContentLoaded
  • LCP
  • TTI
  • 国家
  • 省/州
  • 城市
  • 等

列表功能：

  • 支持过滤用户ID、会话ID
  • 支持导出
  • 支持自定义表头

点击会话ID，会跳转到会话详情。

Trace 详情追踪​

点击详情列表timeStamp，进入到Trace 详情追踪页面，该页面展示了页面加载过程中的请求信息。

请求瀑布图​

以瀑布图形式展示了页面加载中的请求信息：

  • longtask 「浏览器主线程上执行时间超过 50ms 的任务，会阻塞页面渲染、用户交互（如点击、滚动），导致页面卡顿、响应变慢」

  • 支持按请求类型过滤

  • 支持搜索请求URL

错误元素​

展示了发生错误的资源信息，信息包含：

  • 发生时间
  • 资源路径

元素统计​

按请求类型和域名来统计：

  • 请求量
  • 文件传输大小

上报信息​

展示该Trace 详情追踪的原始信息。