高鑫混合式前端性能监控系统v

《高鑫混合式前端性能监控系统v》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、混合式前端性能监控系统高鑫-@我是纯内向搭建基于侵入式与非侵入式监控的性能监控服务Aboutme高鑫微博前端架构师@我是纯内向分布式服务微博客户端消息推送系统前端研发生态体系构建Github:MrGalaxynEmail:MrGalaxyn@gmail.com基于经验的优化往往效果很不佳线上问题更多的来自于反馈意义用数据说明问题抛开经验挖掘更深层的优化点比用户更早的发现问题目录监控什么数据监控系统如何设计监控系统怎么帮助我们下一步工作监控什么数据我们需要什么数据用户的日常吐槽网页打开太慢了按钮点了以后半天没反应页面呈现慢页面响应慢页面呈现速度

2、如何体现？需要衡量首屏的渲染速度何时开始渲染(白屏)，何时渲染完成(首屏)需要衡量与首屏相关因素的速度核心渲染路径用户通过首屏(abovethefold)来感知页面的呈现速度页面响应如何度量？交互中常见的问题网络请求延时动画卡顿往往也与用户环境相关浏览器机型都是通过用户操作(交互)触发请求时间帧频(FPS)技术实现数据怎样采集？我们现在有什么?PerformancerequestAnimationFrame打点获取时间userAgent首屏时间如何获取？技术实现首屏时间如何获取？1.首屏位置嵌入JS脚本2.绑定所有图片load事件3.找到最慢

3、的图片加载时间即为首屏嵌入检测脚本需要开发人员配合影响性能准确性较差浏览器级从访问地址变化开始计时；按照当前视口区域平均分布120*120个像素监控点；每250ms检测一次所有监控点RGB值变化；如果连续12次(即检查3秒)每次变化的像素点占比小于15%，则结束计时，减去检测耗时监控系统需要什么数据页面呈现首屏渲染速度渲染相关因素页面响应网络请求、动画帧频用户环境数据获取方法Performance、rAF、userAgent、打点首屏算法监控系统如何设计技术选型市面上都有啥样的？非侵入式监控来衡量“页面呈现”侵入式监控来衡量“页面响应”，同时

4、分析真实用户数据方式优点缺点样例侵入式真实用户数据可检测用户操作影响页面性能准确性较低需要开发人员参与GoogleAnalytics百度统计非侵入式数据准确性高竞品检测无需开发人员参与采样少操作来自于模拟基调系统阿里测如何扬长避短，既准确监控又不需业务开发人员参与？整体设计功能模块整体设计架构图PhantomJS+CasperJSQtWebKit支持浏览器的各种操作无界面、支持命令行操作部署在公司各IDC采样量增加网络状况稳定，排除不良网络环境干扰监控地址的自动接入日志系统打通技术实现(非侵入式监控)非侵入式监控-关键技术点监控工具选择如何克

5、服采样少的缺点？更大程度的自动化,节省人力移动网络怎么办？？？网络制式下行上行延迟4G400-600KB/S200-500KB/S80-200ms3G100-200KB/S10-100KB/S100-400ms2G10KB/S1KB/S>400ms技术实现(非侵入式监控)移动网络怎么办？使用限速代理模拟移动网络环境已有的方案iptables+tc、ATCFiddler、Charles我们的方案BandwidthLimiterProxy技术实现(侵入式监控)侵入式监控-关键技术点前端数据采集框架前置脚本时间、数据缓存核心模块数据上报插件化功能插

6、件性能FPS日志上报监控本身对于移动端资源消耗（电量、流量）数据压缩localstorage定期上报JS异常捕获window.onerror配置Access-Control-Allow-Origin添加trycatch低版本浏览器以及iOS不支持Performance对象使用cookie模拟无具体错误信息不适用于压缩脚本技术实现(侵入式监控)小坑不断如何减少开发人员参与、减低使用成本？？技术实现(侵入式监控)降低使用成本前端框架的支持公共组件——Ajax组件通用错误的上报通用事件上报——前端渲染完成、css加载自动化工具自动增加通用的处理(如

7、trycatch)增加前增加后增长比20k38k90%注意脚本体积的增长增加前增加后增长比20k22k10%只处理业务逻辑瀑布图技术实现快速定位问题页面访问速度取决于前后端，如何能够快速定位问题所在？后端框架支持+前后端打通前后端结合瀑布图监控系统如何设计非侵入式监控衡量“页面呈现”PhantomJS多IDC部署日志系统打通BandwidthLimiterProxy-限速代理侵入式监控衡量“页面响应”、分析真实访问监控框架前端业务开发框架、工具支持前后端打通提供整体的时间线，快速定位问题监控系统怎么帮助我们数据报表核心数据前后端时间线数据展示

8、日常监控数据展示数据展示用户真实数据数据展示线上JS异常渲染过程了解页面的渲染过程，寻找优化方案PhantomJS改造，提供渲染过程截图监控报警比用户更早的发现问题