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

前提条件

注意 静态资源加载信息的上报是在页面加载时触发的,上报信息量较大。加载耗时大于8秒时会全量上报,介于2~8秒时会采样5%,小于2秒时不上报。如果应用对页面性能要求很高,不建议进行该配置。

阿里云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>

功能入口

  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

发现性能问题的其他渠道

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

  1. 在左侧导航栏中单击会话追踪,即可在会话追踪页签查看该应用下的会话列表。您也可以按照用户名、用户ID、页面地址、会话ID、浏览器、浏览器版本号等条件筛选会话。
    ARMS Browser Monitoring: Session Tracking - Sessions
  2. 单击会话ID列中的ID,即可打开会话详情页面,并查看该会话的概要信息和会话轨迹。详情请参见会话追踪

常见问题

  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请求发起的时间点和耗时。

更多信息