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

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

1 上线前 H5 质量及时检测

1. 页面错误：

   • JS 报错

   • 接口报错

   • 线上环境检测

   • 页面白屏

2. 页面性能

   • 页面完全加载时间

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

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

   • 前端 JS、CSS 个数检测

   • 服务器 Gzip 检测

   • 服务器缓存设置检测

3. 页面安全

   • HTTP、HTTPS 检测

   • XSS 检测

4. 页面卡口

   • 运营（运营平台）

   • 研发（上线平台）

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 准备完成 -> 页面加载 -> 请求数据 -> 绘制页面，过程点记录，整体展示）

• 报警服务（异常报警）