慢会话追踪功能可提供页面加载过程中静态资源加载的性能瀑布图,帮助您根据页面性能数据详细了解页面资源加载情况,并快速定位性能瓶颈。

前提条件

阿里云 ARMS 前端监控 SDK 默认不上报页面加载的静态资源信息。如需获取页面加载的静态资源信息并使用慢会话追踪功能,请在 SDK 的 config 部分将 sendResource 配置为 true。重新部署应用后,页面的 onload 事件触发时就会上报当前页面加载的静态资源信息,继而可在阿里云 ARMS 前端监控中对慢页面加载问题进行快速定位。

SDK 的具体配置如下所示。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f6354******",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>
说明 静态资源加载信息的上报是在页面 onload 时触发的,上报信息量较大。加载耗时大于 8 秒时会全量上报,介于 2~8 秒时会采样 5%,小于 2 秒时不上报。如果应用对页面性能要求很高,建议不开启该配置。

功能入口

  1. 登录 ARMS 控制台
  2. 在左侧导航栏中单击前端监控,在前端监控页面上单击应用名称。
  3. 在左侧导航栏中选择应用 > 会话追踪

使用案例:定位页面性能瓶颈

接下来以一个示例介绍如何定位页面性能瓶颈。

  1. 在左侧导航栏中选择应用 > 访问速度,结果如下图所示。可见 11:00 时的页面完全加载时间长达 36.7 秒。

    ARMS Browser Monitoring: Slow Session Example
  2. 访问速度页面上,使用滚动条向下滚动至慢页面会话追踪(TOP20)区域框。该区域框会列出该页面在指定时间段内加载最慢的 20 个会话。

    下图中 11:36:46 有一次会话的页面加载时间为 36.72 秒,可以判断这次访问应该是导致页面加载时间骤增的直接原因。


    ARMS Browser Monitoring: Slow Sessions Top 20
  3. 慢页面会话追踪(TOP20)区域框的页面列中单击页面名称,即可进入会话追踪 > 会话详情页面。借助该页面的页面资源加载瀑布图,可以直观地查看页面静态资源加载的瀑布图,并借此快速定位资源加载的性能瓶颈。

    ARMS Browser Monitoring: Page Resource Loading Waterfall
  4. 会话追踪 > 会话详情页面顶部的页面信息区域框,可以查看本次访问的客户端 IP 地址、浏览器、操作系统等信息,从而进一步确认问题是由网络原因还是其他原因导致的,并进行针对性的优化。

    ARMS Browser Monitoring: Page Information

发现性能问题的其他渠道

除了访问速度页面外,您也可以通过会话追踪页面发现性能问题。

在左侧导航栏中单击会话追踪,即可查看该应用下的会话列表。您也可以按照页面地址、会话 ID、浏览器、浏览器版本号等条件筛选会话。


ARMS Browser Monitoring: Session Tracking - Sessions

单击操作列中的详情,即可打开会话详情页面,查看该会话的基本页面信息、页面资源加载瀑布图和 API 加载瀑布图。

常见问题

  1. 为什么资源加载瀑布图中 Size 为 0?

    Size 数据是通过 PerformanceResourceTiming.transferSize 获取的。transferSize 只读属性表示所提取资源的大小(以八位字节表示)。如果是从本地缓存获取资源,或者如果是跨源资源,则该属性返回的值为 0。

    在 Chrome 浏览器中按 F12 打开开发者工具面板,当 Network 页签上的 Disable cache 未勾选时,transferSize 为 0。


    Disable Cache Disabled

    Transfersize 0

    解决方法

    勾选 Disable cache 后,transferSize 即恢复正常。

    Disable Cache Enabled

    Transfersize Normal
  2. 为什么资源加载瀑布图中 Time 为 0?

    Time 数据是通过 PerformanceResourceTiming.duration 获取的。在瀑布图中查看静态资源加载情况时,部分情况下 Time 为 0,是由于该请求命中了缓存,并且是通过 max-age 控制的长缓存。

    解决方法

    在 Chrome 浏览器中按 F12 打开开发者工具面板,取消勾选 Network 页签上的 Disable cache,刷新页面后即可看到经过网络过程所耗的时间。

  3. 为什么很多返回的时间数据为 0?

    查看 API 返回的数据时,如果发现很多返回的时间数据为 0,是因为受同源策略的影响,跨域资源获取的时间点会为 0,主要包括以下属性:

    • redirectStart
    • redirectEnd
    • domainLookupStart
    • domainLookupEnd
    • connectStart
    • connectEnd
    • secureConnectionStart
    • requestStart
    • responseStart

    解决方法

    在资源响应头中添加 Timing-Allow-Origin 配置,例如:Timing-Allow-Origin:*

  4. API 加载瀑布图反映哪个时间段内的 API 加载情况?

    API 加载瀑布图对应的时间段为:

    • 开始时间:页面开始加载时间
    • 结束时间:页面完全加载时间 + 1 分钟

    API 加载瀑布图的作用是更直观地展现页面加载过程中所请求 API 的整体情况。

  5. 为什么 API 加载瀑布图中的耗时与页面资源加载瀑布图中的耗时不一致?

    API 加载瀑布图中的耗时会比页面资源加载瀑布图中的 API 耗时多几毫秒,原因在于二者的获取方式不同。具体而言,API 加载瀑布图中的耗时是通过计算从 API 发送请求到 API 数据返回所花费的时间获取的,而页面资源加载瀑布图中的 API 耗时是通过浏览器提供的 API performance.getEntriesByType('resource') 获取的。

    请放心,耗时统计数据的几毫秒差异不会影响排查性能瓶颈。

  6. API 加载瀑布图中时间轴的起点时间是什么?

    API 加载瀑布图中的时间轴的起点时间是 API 发起请求的时间与页面 fetchStart 时间的差值。该时间轴展示页面加载过程中 API 请求发起的时间点和耗时。

更多信息