H5前端监控实践

作者:梁定安,腾讯织云负责人,目前就职于腾讯社交网络运营部,开放运维联盟委员,腾讯云布道师,复旦大学客座讲师。

背景

如今移动设备性能越来越好,移动浏览器对 HTML5(以下简称H5)的支持越来越完善。同时H5页面只需一次开发即可跨Android、IOS双平台发布、快速迭代、无需审核。因此很多移动端产品都选择H5实现。但H5应用每次请求页面,都需要重新加载和渲染,先天性能、流程度没有原生app好,卡慢现象出现更多。有时会收到到用户反馈和投诉:

  • 用户A:我的xx页面打开太慢了;
  • 用户B: 登陆成功后列表显示不全,上面显示读取内容失败;
  • 用户C: 经常提示动态读取失败,这样实在不方便,希望尽快改进。

面对用户的反馈,产品和开发也感到困惑:究竟有多慢?哪个步骤慢?是个别还是大范围受影响?失败的返回码是多少?是不是运营商劫持?能让用户配合用fillder抓个包么?如何优化?优化的效果怎么衡量?

为了便捷的衡量H5页面的速度、质量,高效定位问题,给用户提供更优质的服务。我们建设了自己的H5前端监控——天网云ilook。

天网云 iLOOK 是什么

天网云 ilook (以下简称 ilook )是天网监控体系中的一部分,专注于用户端 H5监控,主要分3部分:

1. 测速系统

通过了解页面响应时间分布情况优化应用,从白屏时间、首屏时间、网页加载时间、资源加载时间和整页完成时间角度展示用户响应时间分布情况,通过浏览器类型、设备以及地理分布等多维度数据进行对比分析。提供端到端的可视化、快速定位缓慢原因及受影响的用户详情。

2. 返回码系统

在最接近用户的场景,监控前端页面http请求的成功率和延时,从时间、平台、网络环境、地域等维度详细分析,快速定位请求失败和耗时长的具体环境,优化应用。

3. 诊断系统

诊断系统提供便捷的移动端用户环境信息搜集解决方案。下发一个 url,用户打开后唤起手机 QQ,授权收集上报后,获取用户的设备信息、网络信息、用户的出口 ip 和 localdns,同时可自定义 http 拨测规则。数据上报至后台,系统自动分析,给出诊断报告。

下面,我先介绍测速与返回码系统是如何实现的, 诊断系统在下次做单独介绍。

iLOOK 测速

1. 测速原理

我们一直在使用各种方式监控产品的页面性能。从控制台、 Fiddler 抓包,到使用 DOMContentLoaded 和 document.onreadystatechange 这种侵入式javascript代码方式来检测 DOM 事件发生和结束的时间,再到使用第三方工具如某某助手等通过在不同的浏览器环境和地域进行测试来寻求优化建议等等,这些方式不仅麻烦,而且测量的指标比较单一。好在W3C Web 性能工作小组与各浏览器厂商都已认识到性能对于 web 开发的重要性,为了解决当前性能测试的困难,W3C 推出了一套性能 API 标准,各种浏览器对这套标准的支持也逐渐成熟。

performance.timing 就是这套 API 提供的性能数据,它精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间( timestamp ),具体属性值如下:

(每个属性的详细说明,可以在这里了解https://www.w3.org/TR/navigation-timing/)

有了这些属性的耗时数据,我们可以通过简单计算获取常用的一些页面性能参数:

  • DNS 查询耗时 :domainLookupEnd - domainLookupStart
  • TCP 链接耗时 :connectEnd - connectStart
  • request 请求耗时 :responseEnd - responseStart
  • 解析 dom 树耗时 : domComplete - domInteractive
  • 白屏时间 :responseStart - navigationStart
  • domready 时间 :domContentLoadedEventEnd - navigationStart
  • onload 时间 :loadEventEnd – navigationStart

1. 数据上报

怎么获取这些属性数据呢?我们写一个段简单的 js (仅测试)试试:

调用后得到的上报结果如下:

我们约定每个指标为一个测速点,按顺序用数字代替。然后,在前端页面里收集 performance.timing 以及业务自定义测速点耗时数据上报。

例如: http://report.qq.com/report.cgi?appid=10012&speedparams=1%3D218%262%3D1115%26flag1%3D1486%26flag2%3D1%26flag3%3D3&apn=wifi&platform=android&rate=1

urldecode 后方便阅读: http://report.qq.com/report.cgi?appid=10012&speedparams=1=218&2=1115&flag1=1486&flag2=1&flag3=3&apn=wifi&platform=android&rate=1

flag1,flag2,flag3是系统自动分配的 id, 其中 flag1,flag2 用于标识域名;flag3用于标示页面。

Speedparams 的值 1,2代表测速点, 1,2的值为测试点耗时。

2. 数据统计

数据统计是基于我们二次开发的哈勃 jstorm 框架,进行实时 ETL 处理,分析计算页面测速点的耗费时间、用户分布。

4. 前端展示

常用的天趋势对比:

还可以有很多展现,比如慢用户画像:

计算测速点延时正太分布:

点击测速点,可以从时间、平台、运营商、APN、省份等维度帮助分析用户访问H5页面的速度以及用户分布。但是,这里还是看单个测速点。怎样更直观的了解页面性能损耗呢?我们想到常用的 chrome浏览器的 developer tools 里面的网络 timing 图:

从 timing 图中可以看出,单个请求,每一个步骤耗时情况。那个步骤耗时最多,也非常清晰。再来看优化后实现的效果,这是最近7天的 timing 图:

点击查看明细,下图的体验是不是更加友好?

5.应用实例

有用户反馈某页面响应慢,通过查看测速数据,定位到是 js 执行时间引起。优化后,执行时间下降显著:

iLook 返回码

前端页面中上报每次请求的返回码(包括 http 协议返回码和业务返回码)和延时,后台给出各个纬度接口请求的成功率和耗时及用户分布数据。

1.数据采集

在页面中每次后端的 http 请求埋点,记录、上报请求的返回码以及耗时数据。例如:H5页面调用 test.qq.com/ cgi-bin/coupon_coin 这个接口,耗时(time=1214)ms,返回码(code=0), 返回成功(type=1), 抽样率为1(rate=1)

http://report.qq.com/code.cgi?time=1214&code=0&type=1&cgi=cgi-bin%2Fcoupon_coin&domain=test.qq.com&rate=1&uin=12345678&appid=10001

2.数据统计

数据统计也是基于我们二次开发的哈勃jstorm框架,进行实时ETL处理,最终根据地域、网络类型、设备等维度统计入库成结果表。

3. 数据展现

提供多维度,灵活对比查询,方便定位问题。

4.应用实例

某条接口成功率在98%左右,主要的错误码为参数错误。根据该错误码定位到提交请求的时候参数检查存在问题,可能会提交空参数。修改发布后,成功率保持在99.9%以上。

最后

H5 监控作为业务质量的重要一环,意义重大。问题定位,性能优化都需要基于上报的数据进行。这里总结了一下我们在前端监控的一些尝试,怎样让监控系统更高效的定位问题,是我们一直在思考解决的问题。欢迎各位有好的想法一起交流探讨。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序人生

再谈 API 的撰写 - 总览

背景 去年我写过一篇文章:撰写合格的 REST API。当时 Juniper 裁掉了我们在德州的一支十多人的团队,那支团队有一半的人手在之前的半年里,主要的工作...

3987
来自专栏杨平安的专栏

微信 PaxosStore:海量数据冷热分级架构

导语 本文整理自笔者在“腾讯大讲堂”的演讲。 作者介绍:杨平安,来自广州的微信事业群,在腾讯已经工作五年。 主要分享内容: 为何公司卓越研发金奖花落PaxosS...

1.6K6
来自专栏JetpropelledSnake

Python Web学习笔记之CPU时间片

时间片即CPU分配给各个程序的时间,每个线程被分配一个时间段,称作它的时间片,即该进程允许运行的时间,使各个程序从表面上看是同时进行的。如果在时 间片结束时进程...

41311
来自专栏web前端教室

[先行者计划]:《Vuex相关概念的讲解和介绍》-- 课堂笔记节选

vuex是什么东西? 官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。" 恩,从这句话可以看出,它应该是一种编写js的思...

1708
来自专栏魏琼东

AgileEAS.NET平台开发实例-药店系统-快速的SAAS开发体验

一、AgileEAS.NET应用开发简介 在4月份,callhot写过一系列的有关于AgileEAS.NET平台的开发应用的系列AgileEAS.NET平台开发...

2266
来自专栏Python攻城狮

GitHub 系列之「怎样使用 GitHub?」1.写在前边的话,为什么要写CitHub?2.GitHub 是什么?3.注册 GitHub

跟朋友在交流的时候听到求职的时候发现有些公司要附Github帐号,一个优秀的 GitHub 账号当然能让你增色不少。自己之前听说过,但没有花时间研究,最后花了时...

1163
来自专栏IT派

谈谈 MVC 模式

如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论。

1040
来自专栏Java技术分享

谈谈MVC模式

1. 如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architectural pattern),属于编程的方法论。 MVC模式就是架构模式的一...

1937
来自专栏Java架构师学习

多研究些架构,少谈些框架——一名阿里架构师的笔记

微服务架构和SOA区别 微服务现在辣么火,业界流行的对比的却都是所谓的Monolithic单体应用,而大量的系统在十几年前都是已经是分布式系统了,那么微服务作为...

3578
来自专栏云时之间

简单爬虫(一):实现百度音乐下载

现在我们听歌往往会集中在一个平台,但是往往很多歌曲只在一个平台独占,我们听自己几首想听的歌曲往往要在几个平台跳来跳去,正好现在在使用爬虫,在学着解析网页的时候,...

37013

扫码关注云+社区