GMTC 大前端时代前端监控的最佳实践十博体育

原标题:如何使用阿里云ARMS轻松重现用户浏览器问题

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

摘要: 今天我分享的内容分成三个部分:
第一部分是“大前端时代前端监控新的变化”,
讲述这些年来,前端监控一些新的视角以及最前沿的一些思考。
第二部分”前端监控的最佳实践”,
从使用的角度出发,介绍前端监控系统的各种使用姿势
最后是“阿里云ARMS前端监控系统架构”,
简单地剖析下,阿里云前端监控系统是怎么实现的。

摘要: 这是阿里中间件 ARMS 团队推出的
“网站常见问题1分钟定位”系列文章的第三篇,作者慕扉。 » 第一篇传送门 »
第二篇传送门 一、客户投诉不断,本地却无法重现?
页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。

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

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

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

本文来自阿里云前端监控团队,转载请注明出处

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

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能:
会话追踪,提供页面静态资源加载的性能瀑布图,根据页面性能数据可深入定位页面资源加载情况。

本文为2018年6月21日,在北京举办的GMTC(全球大前端技术大会),下午性能与监控专场,由阿里云前端监控团队前端技术专家彭伟春带来的演讲稿,现场反馈效果非常好,地上都坐了三圈,很多人反馈根本无法挤进去。先上现场照。

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

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

十博体育 1

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

SDK配置

在阿里云ARMS前端监控SDK部分,默认是不上报页面加载的静态资源信息的,如果想获取页面加载的静态资源信息,只需在SDK的config部分将sendResource配置为true,重新部署后,就可以上报相关信息。具体配置如下:

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

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

正文从这里开始~

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

问题排查过程

1. 发现问题

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

十博体育 2

2. 慢页面会话追踪

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

十博体育 3

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

十博体育 4

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

十博体育 5

3. 其他发现问题入口

会话追踪

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

十博体育 6

访问明细

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

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

十博体育 7

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

十博体育 8

十博体育 9

  1. 监控信息缺少,导致无法深入排查

使用入口指南

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

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

十博体育 10

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

  • 官网文档介绍
  • 阿里云ARMS前端监控官网

本文作者:中间件小哥

阅读原文

本文为云栖社区原创内容,未经允许不得转载。

大家下午好,今天我给大家带来的主题是《大前端时代前端监控的最佳实践》。

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

十博体育 11

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能:
会话追踪,提供页面静态资源加载的性能瀑布图,根据页面性能数据可深入定位页面资源加载情况。

先做一个自我介绍,我叫彭伟春,英文名是Holden, 阿里花名是六猴,
大家都叫我猴哥。是阿里开源同构框架beidou的作者,目前是阿里云前端系统技术负责人。

二、阿里云ARMS前端监控-会话追踪帮助你快速定位问题

十博体育 12

在阿里云ARMS前端监控SDK上将sendResource配置为true,重新部署应用后,在页面时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。

今天我分享的内容分成三个部分:

SDK配置

第一部分是“大前端时代前端监控新的变化”,
讲述这些年来,前端监控一些新的视角以及最前沿的一些思考。

在阿里云ARMS前端监控SDK部分,默认是不上报页面加载的静态资源信息的,如果想获取页面加载的静态资源信息,只需在SDK的config部分将sendResource配置为true,重新部署后,就可以上报相关信息。具体配置如下:

第二部分”前端监控的最佳实践”,
从使用的角度出发,介绍前端监控系统的各种使用姿势。

十博体育 13

最后是“阿里云ARMS前端监控系统架构”,
简单地剖析下,阿里云前端监控系统是怎么实现的。

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

十博体育 14十博体育 15

三、问题排查过程

先进入我们第一个环节 大前端时代前端监控新的变化。

  1. 发现问题

要了解前端监控新的变化,还得先看看前端这些年发生了哪些变化:

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

  1. 首先是Gmail的横空出世,开启了SPA的时代

十博体育 16

2.
Backbone/Angular等框架带来了MVVM模式的同时,也把JS从脚本语言提升到了工程语言

  1. 慢页面会话追踪
  1. React Native/Weex把移动端开发从Hybrid模式进化到了跨端开发模式

  2. Node.js问世为前端带来了更多的可能性

在慢页面会话追踪模块,提供该页面在指定时间段内加载较慢的TOP20,这样可以快速发现哪些会话加载较慢,如下图所示。

十博体育 17

在该模块,你可以快速发现在11点钟有一次会话的页面加载时间在36.72s,这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

前端这些年发生了翻天覆地的变化,又会给监控带来什么呢?让我们思考下以下几个问题:

十博体育 18

  1. 传统监控模式能否适用于新的技术?比如PV统计

  2. SPA模式下首屏如何计算?

  3. 跨端开发给监控带来什么什么挑战?

  4. 前端监控的上报模式在Node.js端是否合理?

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

接下来我和大家一起探讨其中的一两项

十博体育 19

十博体育 20

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

早些年,SPA如此盛行,我们也在业务中做了尝试,体验是大幅提升了,可业务方却吐槽PV下降了。

十博体育 21

十博体育 22

  1. 其他发现问题入口

那到底是什么导致了PV下降了呢?在后端直出时代,我们每一次的交互,都是向后端请求一个新的页面,PV自然就高,改成SPA模式之后,大量的页面请求变成了页内路由,或者说是页内转场。那如何解呢?这难不倒我们,大部分框架路由都是基于哈希实现的,我们只要侦听hash改变,每次改变上报一次PV就好了。也有少量的路由并不是基于哈希实现的,比如angular,
这时候就需要轻量级地hack pushState和replaceState。

会话追踪

十博体育 23

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

这样就完美了吗?

十博体育 24

十博体育 25

访问明细

我们再思考下以下几个案例

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

1.
某新闻类的网站,每次看完之后,都会下拉刷新,加载新的内容,这个时候是算一次PV还是多次?

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

2.
天猫商品列表页,看完一屏之后,向上滚动会再加载新的一屏,PV该算一次还是多次?

十博体育 26

3.
阿里云邮后台一直开着,每周上百次查看,是算一个PV还是每次查看都计算一次?

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

  1. 未关闭的浏览器tab几小时之后再次浏览,该不该再计一次PV?

  2. 查找信息时,浏览器Tab之间快速切换,切换过程中要不要计一次PV?

十博体育 27

其实还有很多其它层出不穷的场景,具体该如何去统计PV留给大家去思考,
不再展开。

使用入口指南

十博体育 28

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

接下来我们探讨一个大家最感兴趣的话题:
性能。先看一组我们的统计数据,淘宝旺铺页面点击率随加载时间变长从85%的点击率逐步降低到了82%,别小看这3%,在阿里这么大的体量下,3%意味着巨大的商业价值,那站在前端监控的角度,首屏是如何统计出来的呢?

  • 点击详情后,可以查看具体的页面资源加载瀑布图
  • 如果Top20不满足,可以点击”更多”,从而进入”会话列表”

十博体育 29

2、进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况。

回到那个刀耕火种的年代,那时候要什么没什么,都是自己动手丰衣足食。这就是手动打点阶段:
手动打点,分别在页头和首屏dom节点处new
Date()打点,计算差值,作为首屏时间,再加上setTimeout(new
Date标记首屏可交互时间。

十博体育 30

十博体育 31

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

随着前端的飞速发展,手工打点的模式早已满足不了需求了。为了帮助开发人员更好地衡量和改进web性能,W3C性能小组引入了
Navigation Timing API
帮我们自动,精准的实现了性能测试的打点问题,大致地过一下,性能API里面包含了最后触发load事件,通常我们把domContentLoaded作为首屏时间。Chrome最早支持,IE跟进。

作者:中间件小哥

十博体育 32

​本文为云栖社区原创内容,未经允许不得转载。返回搜狐,查看更多

在很长一段时间里,我们都享受着performance API带来的便利,
但随着SPA模式的盛行,我们再回过头来看看W3C标准是否足够了。先来看一个案例,这是阿里云某产品的管理后台。整个加载过程分成三个部分,1.
加载初始的空壳页面 2.加载JS资源并异步请求数据 3.
前端渲染中间的主体部分。按照W3C标准取值首屏时间应该是1106ms,
而实际的首屏在1976ms,也就是完成异步取数据后渲染完页面的时间点。为什么会相差如此大呢?实际上SPA的盛行让W3C标准失去了原来的意义。

责任编辑:

十博体育 33

针对这种情况Google lighthouse提出了FMP的概念,first meaning paint,
也就是主要内容可见时间,那什么是主要内容? 每个人得出的结论可能会不一样。

十博体育 34

先做一个猜想:主要内容 = 页面渲染过中元素增量最大的点。

十博体育 35

先通过飞猪案例做一次验证。

十博体育 36

猜想成立。

十博体育 37

再通过手淘案例做一次验证。

十博体育 38

猜想不成立。

十博体育 39