这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天。
定义
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
前端监控SDK前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。
为什么需要前端监控
- 减少等待时间
- 使网页更加稳定
研究表明:性能不佳会对业务目标产生负面影响。
前端监控到底监控了什么
1.性能指标
2.异常事件
3.用户行为
Web标准的诞生
早期网页是纯静态的,但随着Web爆发式发展,页面交互越来越复杂。开发者开始思考如何提高
Web性能、改善用户体验。
因此,2010年8月, W3C成立了 Web性能工作组,由来自Google和 Microsoft的工程师担任主席,目标是制定衡量Web应用性能的方法和API。
随后,Web 性能工作组开始制定一系列 Web 性能标准,应用到桌面和移动浏览器以及其他环境中,帮助Web 开发人员评估和理解应用的性能特征。
1. TTI (Time to Interactive):测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间。
2. TTI反映页面可用性的重要指标。TTI值越小,代表用户可以更早地操作页面,用户体验就更好。
3. SI (Speed Index):衡量页面可视区域加载速度,帮助检测页面的加载体验差异。
4. FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应,实际能够开始处理事件时处理程序所经过的时间
5. LCP (Largest Contentful Paint):最大的内容在可视区域内变得可见的时间点。
LCP优点:1.容易理解2.给出与FMP相似的结果3.容易计算和上报