前端性能优化-全链路质量监控体系建设

本文地址:https://www.cnblogs.com/veinyin/p/14381741.html

1 上线前 H5 质量及时检测

  1. 页面错误:

    • JS 报错

    • 接口报错

    • 线上环境检测

    • 页面白屏

  1. 页面性能

    • 页面完全加载时间

    • 前端 JS、CSS、HTML,压缩检测

    • 前端大 JS、CSS、HTML、大图检测

    • 前端 JS、CSS 个数检测

    • 服务器 Gzip 检测

    • 服务器缓存设置检测

  2. 页面安全

    • HTTP、HTTPS 检测

    • XSS 检测

  3. 页面卡口

    • 运营(运营平台)

    • 研发(上线平台)

2 上线后 H5 性能和错误监控

  1. 页面性能监控

    • JS 错误监控

    • API 接口监控(非200状态的请求)

    • 日志详情

    • 用户轨迹(用户页面停留时间,使用记录等)

  2. 统计报表

    • 大盘走势(加载时间、接口响应率等)

    • 地域(城市维度的监控)

    • 运营商(三大运营商)

    • 浏览器(用户手机型号、浏览器版本,作为用户选型参考)

  3. 页面管理(收集页面、接口所属开发人员)

  4. 性能指标

  5. 报警服务(pv 是否正常、报错数量、运营商数据、地域数据等等等)

3 线上业务基调监控

  1. 竞品分析

  2. 多点监控

  3. 告警服务

4 发版后 APP 性能和错误监控

可以监控以下数据

  • 网络请求(所有网络接口请求的情况,发起时间、响应时间)

  • 启动监控(冷启动、热启动,点击 APP 到打开第一个页面的时间、其他 APP 切换过来的时间等)

  • 崩溃监控(某些机型或特殊行为导致的崩溃)

  • 页面监控(APP 原生应用性能指标,用户点击按钮 -> 转场动画 -> 绘制完成 -> 用户可以查看的过程耗时)

  • 网络监控(网络状态 - 345G、WiFi,IP)

  • WebView 监控(用户点击 -> 转场动画 -> WebView 准备完成 -> 页面加载 -> 请求数据 -> 绘制页面,过程点记录,整体展示)

  • 报警服务(异常报警)

感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:VeinYin
博客地址:https://www.cnblogs.com/veinyin/
如需转载请注明出处。
原文地址:https://www.cnblogs.com/veinyin/p/14381741.html