新手做网站的几个必要步骤,网站页面优化签象客,网上注册公司申请流程,php网站发送邮件这是阿里中间件 ARMS 团队推出的 “网站常见问题1分钟定位”系列文章的第三篇#xff0c;作者慕扉。 第一篇传送门 第二篇传送门
一、客户投诉不断#xff0c;本地却无法重现#xff1f;
页面加载较慢是用户经常会反馈的问题#xff0c;也是前端非常关注的问题之一。…这是阿里中间件 ARMS 团队推出的 “网站常见问题1分钟定位”系列文章的第三篇作者慕扉。
» 第一篇传送门
» 第二篇传送门
一、客户投诉不断本地却无法重现
页面加载较慢是用户经常会反馈的问题也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间主要原因如下
1. 页面是在用户端的浏览器上加载执行复现困难
页面上线前开发同学都会进行测试在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时页面的加载是在用户端的浏览器上进行的由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系想知道用户在访问页面时的具体情况复现是非常困难的。
2. 监控信息缺少导致无法深入排查
大部分前端监控会通过PerformanceTiming对象获取完整的页面加载耗时信息但这类监控就缺失了页面静态资源的加载情况无法直接复现现场从而无法深入定位性能瓶颈。
为了方便用户更快地定位性能瓶颈阿里云ARMS前端监控推出一新功能: 会话追踪提供页面静态资源加载的性能瀑布图根据页面性能数据可深入定位页面资源加载情况。
二、阿里云ARMS前端监控-会话追踪帮助你快速定位问题
在阿里云ARMS前端监控SDK上将sendResource配置为true重新部署应用后在页面onload时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。
SDK配置
在阿里云ARMS前端监控SDK部分默认是不上报页面加载的静态资源信息的如果想获取页面加载的静态资源信息只需在SDK的config部分将sendResource配置为true重新部署后就可以上报相关信息。具体配置如下
script!(function(c,b,d,a){c[a]||(c[a]{});c[a].config
{pid:atc889zkcf8cc3f63543da641,imgUrl:https://arms
retcode.aliyuncs.com/r.png?,sendResource:true};with(b)with(body
)with(insertBefore(createElement(script),firstChild))setAttribute(c
rossorigin,,srcd)})(wi
ndow,document,https://retcode.alicdn.com/retcode/bl.js,__bl);
/script注意静态资源加载信息的上报是在页面onload时会触发上报信息量较大如果对于页面性能要求很高的应用可以不开启该配置。
三、问题排查过程
1. 发现问题
进入访问速度菜单后发现页面的性能较差11点钟的页面完全加载时间达到35s如下 2. 慢页面会话追踪
在慢页面会话追踪模块提供该页面在指定时间段内加载较慢的TOP20这样可以快速发现哪些会话加载较慢如下图所示。 在该模块你可以快速发现在11点钟有一次会话的页面加载时间在36.72s这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。 其中在在模块有7次会话访问的页面加载时间在7s以上点击对应的页面可以直接进入到会话详情页面从而直观查看页面静态资源加载的瀑布图。 通过页面资源加载的瀑布图可以快速定位到资源加载的性能瓶颈同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息从而进一步确认是由于网络原因还是其他原因导致的针对性进行相应的优化。 3. 其他发现问题入口
会话追踪
也可以进入“会话追踪”菜单可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序展示TOP100帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤展示相关的会话信息。点击操作后是该会话的页面资源加载详情。 访问明细
如果当前会话列表中无法找到你要排查的会话信息可以通过访问明细查找到相应的日志详细信息在param中找到对应的sid即会话Id然后在会话列表中查找相应的会话Id即可以定位到想排查的会话信息。 例如在已知用户的客户端IP的情况下想定位相应的会话信息即可以在访问明细中通过tres and 117.136.32.110 进行搜索找到对应的会话Id。 根据查找到的会话Id, 就可以在会话列表中进行过滤定位到具体的会话内容。 使用入口指南
1、进入访问速度菜单如果发现页面性能较差可以在慢页面会话追踪Top20中查看访问较慢的会话情况
点击详情后可以查看具体的页面资源加载瀑布图如果Top20不满足可以点击更多从而进入会话列表
2、进入会话追踪菜单展示的是TOP100的会话列表信息根据页面完全加载时间从高到底排序排查页面资源加载情况。 至此慢页面会话追踪功能及使用方法介绍完成。该功能可以帮助你复现用户在访问页面时的页面资源加载情况快速定位性能瓶颈问题。
原文链接 本文为云栖社区原创内容未经允许不得转载。
