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 以及业务自定义测速点耗时数据上报。
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)
2.数据统计
数据统计也是基于我们二次开发的哈勃jstorm框架，进行实时ETL处理，最终根据地域、网络类型、设备等维度统计入库成结果表。
3. 数据展现
提供多维度，灵活对比查询，方便定位问题。
4.应用实例
某条接口成功率在98%左右，主要的错误码为参数错误。根据该错误码定位到提交请求的时候参数检查存在问题，可能会提交空参数。修改发布后，成功率保持在99.9%以上。
最后
H5 监控作为业务质量的重要一环，意义重大。问题定位，性能优化都需要基于上报的数据进行。这里总结了一下我们在前端监控的一些尝试，怎样让监控系统更高效的定位问题，是我们一直在思考解决的问题。欢迎各位有好的想法一起交流探讨。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。