全部产品
阿里云办公

慢会话追踪

更新时间:2018-09-26 14:53:45

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

前提条件

阿里云 ARMS 前端监控 SDK 默认不上报页面加载的静态资源信息。如需获取页面加载的静态资源信息,请在 SDK 的 config 部分将 sendResource 配置为 true。重新部署应用后,页面 onload 时会上报当前页面加载的静态资源信息,此后即可在阿里云前端监控平台对慢页面加载问题进行快速定位。

SDK 的具体配置如下所示。

  1. <script>
  2. !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f63543da641",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
  3. with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  4. })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
  5. </script>

注意:静态资源加载信息的上报是在页面 onload 时触发的,上报信息量较大。如果应用对页面性能要求很高,则可以不开启该配置。

排查性能瓶颈问题

接下来以一个示例介绍如何排查性能瓶颈问题。

1. 发现问题

进入前端监控的访问速度页面后,发现页面性能较差。11:00 时的页面完全加载时间达到 36.7 秒。

2. 慢页面会话追踪

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

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

慢页面会话追踪(TOP20)模块的页面栏中单击页面名称,即可进入会话详情页面。借助该页面的页面资源加载瀑布图,您可以直观地查看页面静态资源加载的瀑布图,并借此快速定位资源加载的性能瓶颈。

会话详情页面顶部的页面信息模块,您可以查看本次访问的客户端 IP 地址、浏览器、操作系统等 UA 信息,从而进一步确认问题是由网络原因还是其他原因导致的,并进行针对性的优化。

3. 其他发现问题的入口

  • 会话追踪页面

    您也可以进入会话追踪页面,以查看该应用下的会话列表。会话列表会按从慢到快的顺序,列出页面完全加载时间最慢的前 100 个页面,帮助您快速发现耗时较长的会话。另外,您也可以按照页面、会话 ID、浏览器、浏览器版本号过滤相关会话信息。单击操作栏中的详情,即可查看该会话的页面资源加载详情。

  • 访问明细页面

    如果当前会话列表中找不到您要排查的会话信息,可以通过访问明细页面查找到相应的日志详细信息,并在 param 中找到对应的 sid(即会话 ID)。然后在会话列表中查找此会话 ID,即可定位到要排查的会话信息。

    例如:在已知用户的客户端 IP 的情况下,如需定位相应的会话信息,则可以在访问明细页面上,通过搜索关键字 t=res and 117.136.32.110,即可找到对应的会话 ID。

    根据查找到的会话 ID,就可以在会话列表中通过过滤定位到具体的会话内容。

常见问题 1:资源加载瀑布图中 size 为 0

这里的 size 数据是通过 PerformanceResourceTiming.transferSize 获取的。

transferSize 只读属性表示所提取资源的大小(以八位字节表示)。但我们会发现该属性返回的内容有时会为 0,原因是:如果是从本地缓存获取资源,或者如果是跨源资源,则该属性返回零。

在 Chrome 浏览器中按 F12 打开控制台,当 Disable cache 选项未启用时,可以看到 transferSize 为 0:

解决方法

启用 Disable cache 选项后,transferSize 内容正常:

常见问题 2:资源加载瀑布图中 time 为 0

time 数据是通过 PerformanceResourceTiming.duration 获取的。

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

解决方法

在 Chrome 浏览器中按 F12 打开控制台,在 Network 标签页上禁用缓存(Disable cache)后,刷新页面就可以看到经过网络过程所耗的时间了。

常见问题 3:跨域问题

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

  1. redirectStart
  2. redirectEnd
  3. domainLookupStart
  4. domainLookupEnd
  5. connectStart
  6. connectEnd
  7. secureConnectionStart
  8. requestStart
  9. 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 请求发起的时间点和耗时。