这是我参与「第五届青训营 」伴学笔记创作活动的第 14天
青训营课程笔记
什么是前端监控
前端监控就是尽可能的采集浏览器从输入URL到页面展示这一过程及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
为什么要前端监控
浏览网页会遇到的问题：
- 网页打开慢
- 网页图片全都裂开，即加载失败
- 网页空白
- 网页卡顿
当我们网页有了前端监控能力，可知出现问题原因：
- 打开慢——页面某个关键资源渲染太慢
- 交互卡顿——页面同步计算任务太重，阻塞渲染
- 资源加载失败——客户端网络状态差，或上游服务节点异常
- 页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等
前端监控到底监控什么
- 性能指标
- 异常事件
- 用户行为
性能指标
传统性能指标
通过记录一个文档从发起请求到加载完毕的各种阶段的性能耗时，以加载速度来衡量性能
以用户为中心的性能指标
传统性能指标专注于容易衡量的技术细节，但是很难反映用户所真正关心的是什么，以用户为中心的性能指标，专注于用户视角下的浏览体验
用户体验指标，发送了吗，内容有用吗，内容可用吗，令人愉悦吗
- FP（首次渲染时间点）
- FCP（首次有内容渲染时间点）
- FMP（首次绘制有意义内容的时间点）
- TTI
- FID
前端监控之前常见异常
静态资源异常
静态资源如图片，音频等，静态资源错误即阿紫拉取和加载静态资源的过程中发生预期之外的错误，如网络异常
请求异常
对于通过异步请求拉取的静态资源错误也可归纳为请求异常
JS错误
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
白屏异常
通过判断DOM树的结构来粗略的判断白屏是否发生
前端监控流程概述
数据采集->组装上报->清洗存储->数据消费
总结
通过本次实战先了解关于前端监控的相关知识，而后进行一个小实战,由知识到实践使得学习更加深刻
