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

前提条件

您的前端应用已接入ARMS,具体操作,请参见前端监控接入概述

诊断页面缓慢的问题

以下步骤演示了一个排查策略示例的具体步骤:

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

更多信息