网站常见问题1分钟定位 - 如何使用阿里云ARMS轻松重现用户浏览器问题

本文涉及的产品
性能测试 PTS,5000VUM额度
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: 客户投诉不断,本地却无法重现?页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:页面是在用户端的浏览器上加载执行,复现困难页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。

客户投诉不断,本地却无法重现?

页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:

  1. 页面是在用户端的浏览器上加载执行,复现困难

    • 页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时,页面的加载是在用户端的浏览器上进行的,由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系,想知道用户在访问页面时的具体情况,复现是非常困难的。
  2. 监控信息缺少,导致无法深入排查

    • 大部分前端监控会通过PerformanceTiming对象,获取完整的页面加载耗时信息,但这类监控就缺失了页面静态资源的加载情况,无法直接复现现场,从而无法深入定位性能瓶颈。

为了方便用户更快地定位性能瓶颈,阿里云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:"atc889zkcf@8cc3f63543da641",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时会触发,上报信息量较大,如果对于页面性能要求很高的应用,可以不开启该配置。

问题排查过程

1. 发现问题

进入访问速度菜单后,发现页面的性能较差,11点钟的页面完全加载时间达到35s,如下:

image | left

2. 慢页面会话追踪

在慢页面会话追踪模块,提供该页面在指定时间段内加载较慢的TOP20,这样可以快速发现哪些会话加载较慢,如下图所示。
在该模块,你可以快速发现在11点钟有一次会话的页面加载时间在36.72s,这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

image | left

其中在在模块有7次会话访问的页面加载时间在7s以上,点击对应的页面,可以直接进入到会话详情页面,从而直观查看页面静态资源加载的瀑布图。

image | left

通过页面资源加载的瀑布图,可以快速定位到资源加载的性能瓶颈,同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息,从而进一步确认是由于网络原因还是其他原因导致的,针对性进行相应的优化。

image | left

3. 其他发现问题入口

会话追踪

也可以进入“会话追踪”菜单,可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序,展示TOP100,帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤,展示相关的会话信息。点击操作后,是该会话的页面资源加载详情。

image | left

访问明细

如果当前会话列表中无法找到你要排查的会话信息,可以通过访问明细查找到相应的日志详细信息,在param中找到对应的sid即会话Id,然后在会话列表中查找相应的会话Id,即可以定位到想排查的会话信息。

例如:在已知用户的客户端IP的情况下,想定位相应的会话信息,即可以在访问明细中,通过t=res and 117.136.32.110 进行搜索,找到对应的会话Id。

image | left

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

image | left

使用入口指南

  1. 进入访问速度菜单,如果发现页面性能较差,可以在"慢页面会话追踪Top20"中查看访问较慢的会话情况

    • 点击详情后,可以查看具体的页面资源加载瀑布图
    • 如果Top20不满足,可以点击"更多",从而进入"会话列表"
  2. 进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况

image | left

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

附录

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
相关文章
|
28天前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
81 7
|
1月前
|
Web App开发 监控 前端开发
如何确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示?
【10月更文挑战第24天】通过以上这些措施,可以最大程度地确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示。同时,不断的优化和改进也是保持网站兼容性的关键。
|
2月前
|
Web App开发 前端开发 JavaScript
为什么浏览器兼容性在开发网站时很重要?
浏览器兼容性在网站开发中确实非常重要。
|
3月前
|
Web App开发 存储 安全
Python编写脚本,打开浏览器输入网址,自动化登陆网站
Python编写脚本,打开浏览器输入网址,自动化登陆网站
109 4
|
3月前
|
安全
微软网站上关于在Edge浏览器中打开或关闭smartScreen的说明有误
微软网站上关于在Edge浏览器中打开或关闭smartScreen的说明有误
微软网站上关于在Edge浏览器中打开或关闭smartScreen的说明有误
|
3月前
|
Web App开发 缓存 安全
解决Edge浏览器提示“此网站已被人举报不安全”
【9月更文挑战第1天】当 Edge 浏览器提示“此网站被举报为不安全”时,可尝试:关闭 Microsoft Defender SmartScreen;检查网站安全性;清除缓存和 Cookie;更新 Edge 至最新版;或使用其他浏览器。若问题依旧,联系网站管理员和技术支持。同时,避免在不可信网站输入敏感信息,保护网络安全与隐私。
495 7
|
4月前
|
存储 缓存 安全
解决Edge浏览器提示“此网站已被人举报不安全”
【8月更文挑战第19天】如果Edge浏览器提示“此网站已被人举报不安全”,首先确认网站可信度及安全证书有效性,避免访问可疑网站。检查浏览器是否需要更新,并确保自动更新功能已开启。可暂时关闭Microsoft Defender SmartScreen(不建议长期关闭),清除缓存和Cookies,或检查第三方安全软件设置。若问题持续,考虑重置Edge浏览器设置,保留重要数据。如仍无法解决,联系网站管理员或微软支持。
397 7
|
5月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
125 3
|
4月前
|
缓存 网络协议 Linux
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?
|
7月前
|
网络协议 关系型数据库 Linux
使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
308 0