页面性能极其影响用户体验,而用户体验很大程度地决定了用户去留,因此前端性能监控和分析变得尤为重要。本文主要介绍如何使用 ARMS 前端监控为您诊断页面打开缓慢的问题。

ARMS 前端监控的优势

  • 基于真实用户数据的多维度性能分析:
    • 无需模拟、无需登录,完全还原真实用户操作。
    • 真实用户数据真实地反映终端用户体验,减少统计误差,迅速确定用户问题范围,例如哪个地域、哪台设备、哪个浏览器等问题。
  • 页面性能分析:
    • 首次渲染时间:DNS 解析耗时、TCP 连接耗时是否偏高。
    • DOM Ready 时间:Request、Response 耗时是否偏高。
    • 资源加载时间:资源加载是否缓慢。
  • JS 错误分析:

    监控和诊断 JS 错误的发生。

  • 自定义统计:

    可以通过 SDK 上报用户自定义的事件,进行自定义统计。

  • 访问明细:

    可以查询监控到的所有用户的访问情况。

  • 与应用监控请求数据打通:

    确定页面加载缓慢后,可以与应用监控联动排查。

操作步骤

当有用户反馈页面打开缓慢的时候,您应该如何排查呢?以下描述了一个排查策略示例。

  1. 登录 ARMS 控制台
  2. 在左侧导航栏选择前端监控,在前端监控页面上单击您的应用名称,然后在左侧导航栏选择应用 > 访问速度
  3. 页面加载时间详情区域和页面加载瀑布图区域查看关键性能指标是否有异常。
    图 1. 页面加载时间详情
    Page Load Time Details
    图 2. 页面加载瀑布图
    Page Load Waterfall Plot
    1. 如果首次渲染时间、或 DNS 查询、TCP 连接和 SSL 建连耗时偏高,表示页面打开缓慢可能是由网络原因造成的,那么您需要检查您的网络问题。
    2. 如果 DOM Ready、或请求响应和内容传输耗时偏高,表示页面打开缓慢的原因可能是 API 请求缓慢,那么您需要执行步骤 4 进行排查。
    3. 如果页面完全加载时间、或 DOM 解析和资源加载耗时偏高,表示页面打开缓慢的原因可能是前端资源加载缓慢,那么您需要执行步骤 5 进行排查。
  4. 在左侧导航栏选择应用 > API 详情
    1. API 请求列表区域,单击某条 API 缓慢次数列的数字。
      API Request List
    2. 在弹出的 API 缓慢次数详情信息对话框中,单击网络请求信息区域右上角的跳转调用链,查看前端监控的整体耗时和后端应用的调用时序图。
      Trace
      • 如果后端应用处理时间较短,而整体耗时较长,则说明 API 请求从发送到服务端以及从服务端返回数据到浏览器端的网络传输耗时较长。此时可以在左侧导航栏选择应用 > 访问明细,然后单击 API 日志,将上述 API 设置为搜索值后单击搜索,查看本次访问的网络、地域、浏览器、设备和操作系统等信息。
      • 如果后端应用处理时间较长,则说明后端处理的性能较差。此时可以单击方法栈栏中的放大镜图标,并在本地方法栈对话框中查看后端链路上哪部分内容耗时较长,继而定位问题。
  5. 慢页面会话追踪(TOP20)区域,单击某条慢会话的页面名称。
    会话详情页面,您可以在页面资源加载瀑布图区域查看具体是哪些资源加载缓慢导致的页面打开缓慢。