定位、排查网页加载过慢问题的原因有诸多难点。针对这类问题,ARMS 前端监控的慢会话追踪功能提供页面静态资源加载的性能瀑布图,可深入定位页面资源加载情况,全方位地诊断故障根源,从而快速排除故障。

问题描述

网页加载较慢是经常出现且前端非常关注的问题之一。定位、排查解决这类问题的难点如下:

  • 复现困难

    假设您的一位用户是 A,当 A 访问某网页时,该页面会加载在 A 本地的浏览器上。由于页面的加载耗时受地域、网络情况、浏览器或者运营商等因素影响,排查问题时无法复现 A 在访问页面时的具体情况。

  • 监控信息缺少,无法深入排查

    大部分前端监控会通过 PerformanceTiming 对象来获取完整的页面加载耗时信息,这将缺失页面静态资源的加载情况,导致无法深入定位性能瓶颈。

解决方案

只需将 Web 端应用接入 ARMS 前端监控,并且在接入时开启页面资源上报功能,然后利用 ARMS 前端监控的慢会话追踪功能,即可帮助您快速定位性能瓶颈。

步骤一:接入 ARMS 前端监控

ARMS 前端监控 SDK 默认不上报页面加载的静态资源信息。若使用慢会话追踪功能对慢页面加载问题快速定位,则需获取页面加载的静态资源信息。

将您的 Web 端应用接入 ARMS 前端监控,请参见文档以 CDN 方式接入来进行接入。
注意 在接入时勾选开启页面资源上报项,才能使用慢会话追踪功能。

步骤二:定位故障

您可以通过两种不同入口的方式来定位故障,两种方式均能达到使用慢会话追踪功能诊断网页性能问题的目的。

方式一:从访问速度开始排查

  1. 登录ARMS 控制台,在左侧导航栏中单击前端监控

  2. 前端监控页面上,单击您的应用名称。

  3. 在左侧导航栏中单击访问速度

    访问速度页面详情介绍请参见页面访问速度。在本示例中,该页面性能较差,在 11:00 时左右的页面完全加载时间达到 36.7 s。



  4. 访问速度页面上,拖动右侧的滚动条至慢页面会话追踪(TOP20)模块。该模块会列出该页面在指定时间段内加载最慢的 20 个会话。

    在本示例中,您可以看到在 11:36:46 的页面加载时间为 36.72 s,可以判断这次访问是导致页面加载时间骤增的原因。



  5. 慢页面会话追踪(TOP20)模块的页面列中单击目标页面名称,进入会话详情页面。然后根据会话详情页的信息定位故障原因,进而排除故障。

    会话详情页面顶部的页面信息模块展示了本次访问的客户端 IP 地址、浏览器、操作系统等信息,帮助您进一步确认故障原因。



    会话详情页面的页面资源加载瀑布图模块展示了页面静态资源加载的瀑布图,帮助您快速定位资源加载的性能瓶颈。



    更多慢会话追踪页面详情请参见慢会话追踪

方式二:从会话追踪开始排查

  1. ARMS 控制台,在左侧导航栏中单击前端监控

  2. 前端监控页面上,单击您的应用名称。

  3. 在左侧导航栏中单击会话追踪,进入会话列表页。

    会话列表页展示了该应用下加载时长 Top 100 的会话,可以按照页面、会话 ID、浏览器、浏览器版本号进行过滤,帮助用户可以快速发现耗时较长的会话信息。

  4. 会话列表页单击目标页面操作列的详情。然后根据会话详情页的信息定位故障原因,进而排除故障。

    慢会话追踪页面详情请参见慢会话追踪

操作至此,已使用慢会话追踪功能完成问题排查,该功能可以帮助你复现用户在访问页面时的页面资源加载情况,快速定位性能瓶颈问题。

后续操作

为避免在出现问题后被动诊断错误原因,您还可以使用 ARMS 的报警功能针对一个接口或全部接口创建报警,即可在出现问题的第一时间向运维团队发送通知。

创建报警操作步骤请参见快速创建 ARMS 报警

更多信息