这是我参与「第五届青训营 」伴学笔记创作活动的第15天。
什么是前端监控
前端监控就是尽可能的采集从输入URL到页面展示这一过程以及后续用户交互中产出的的性能指标与发生的异常事件并上报到平台完成消费。
为什么需要前端监控
对于用户使用网页中产生的问题 网页打开慢、交互卡顿、资源加载失败、页面白屏等问题，前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。例如页面某个关键资源渲染太慢；页面同步计算任务太重，阻塞渲染；客户端网络状态差，或上游服务节点异常；页面脚本执行失败、关键资源加载失败、请求失败等。
前端监控到底监控了什么
性能指标、异常事件、用户行为、重要指标（ 可交互性、服务稳定性、加载速度、可用性、业务数据）等信息。
前端监控的常用性能指标
web性能标准的诞生
早期网页是纯静态的,但随着Web爆发式发展,页面交互越来来越复杂。开发者开始思考如何提高Web性能、改善用户体验。 因此,2010年8月,W3C成立了Web性能工作组,由来自Google 和Microsoft的工程师担任主席,目标是制定衡量Web应用性能的方法和API 随后,Web性能工作组开始制定一系列Web性能标准,应用到桌面和移动浏览器以及其他环境中,帮助Web开发人员评估和理解应用的性能能特征。
传统的性能指标
传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时,以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节,但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快,你很快就会发现网站的月用户体验依然很差。 这就是创建用户为中心的性能指标的原因,它们专注于用户视角通下的浏览体验。
FP(First Paint):首次渲染的时间点。FP时间点之前,用户看到的都是没有任何内容的白色屏幕。
FCP (First Contentful Paint):首次有内容渲染的时间点。
FMP(First Meaningful Paint):首次绘制有意义内容的时间点。
TTI(Time to Interactive):测量页面从开始加载到主要子资源完成渲染并能够快速、可靠地响应用户输入所需的时间。TTI反映页面可用性的重要指标。TTI值越小,代表用户可以更早地操作页面,用户体验就更好。
SI(Speed Index):衡量页面可视区域加载速度,帮助检测页面的加载体验差异。
FID(First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应,实际能够开始处理事事件时处理程序所经过的时间
LCP (Largest Contentful Paint):最大的内容在可视区域内变得可见的时间点。优点：容易理解、给出与FMP相似的结果、容易计算和上报
TBT(Total Blocking Time):量化主线程在空闲之前的繁忙程度有助于理解在加载期间,页面无法响应用户输入的时间有多久。
长任务:如果一个任务在主线程上运行超过50毫秒,那么它就是长任务。超过50ms后的任务耗时,都算作任务的阻塞时间。一个页面的TBT,是从FCP到TTI之间所有长任务的阻塞时间的总和。
CLS (Cumulative Layout Shift):量化了在页面加载期间,视口中元素的移动程度。
前端监控的前端常见异常
- 静态资源:加载页面所需的html、css和js等文件,以及其他各类多媒体文件,如图片、音频和视频等。
- 静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误,如网络异常等,导致静态资源无法正常渲染到页面上。
Http请求状态码分类
- 100-199————信息响应
- 200 - 299————成功响应
- 300 - 399————重定向消息
- 400 - 499————客户端错误响应
- 500 - 599————服务端错误响应
- 状态码0————XMLHttpRequests被停止
- 请求异常=请求响应状态码>=400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异异常
白屏异常
通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生，通常导致白屏发生的原因可能有如下几点:
- 发生Js错误导致关键资源渲染失败。
- 请求异常或静态资源加载失败。
- 长时间的Js线程繁忙阻塞渲染任务。
