这是我参与「第五届青训营」伴学笔记创作活动的的第4天 (❤ ω ❤)
对于用户在使用网页时出现的比如页面渲染慢、交互卡顿、资源加载失败、页面白屏等问题，需要开发者借助前端监控体系，来复现问题出现的过程，从而发现问题原因，进而解决问题、优化页面。
页面问题的原因分析：
页面渲染慢——页面某个关键资源渲染太慢。
交互卡顿——页面同步计算任务太重，阻塞渲染。
资源加载失败——客户端网络状态差，或上游服务节点异常。
页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等。
前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控的常用性能指标
1、传统性能指标
传统性能指标专注于技术面上的细节监控，主要依赖Navigation Timing等可视化流水线结构，通过检测记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
2、以用户为中心的性能指标
以用户为中心的性能指标专注于用户视角下的浏览体验，反映出用户使用时真正关心什么，从而针对性提高用户的使用体验。
常用术语分析：
FP：First Paint，首次渲染的时间点，此时页面顶端出现加载进度。
FCP：First Contentful Paint，首次有内容渲染的时间点，此时出现页面基本框架。
FMP：First Meaningful Paint，首次绘制有意义内容的时间点，此时出现用户期望内容。
TTI： Time to Interactive，测量页面从开始加载到主要子资源完成渲染，并能够快速 、可靠地响应用户输入所需的时间。反映了页面可用性，TTI值越小，用户体验更佳。
SI：Speed index，衡量页面可视区域加载速度，帮助检测页面的加载体验差异。对用户来说，相同加载时间内，较平均的内容展现速率具有更好的页面体验。
FID：First Input Delay，测量从用户第一次与页面交互直到浏览器对交互做出响应，实际能够开始处理事件时处理程序所经过的时间。
LCP：Largest Contentful Paint，最大的内容元素（对用户理解页面内容最有用的元素）在可视区域内变得可见的时间点。类似于FMP，易于理解、计算和上报。
TBT: Total Blocking Time，量化主线程在空闲之前的繁忙程度，有助于理解在加载期间页面无法响应用户输入的时间有多久。相等于从FCP到TTI之间所有长任务（加载时间>50ms）的阻塞时间的总和。
CLS：Cumulative Layout Shift，在页面加载中出现元素突然偏移、弹窗等会导致用户误触操作，降低浏览体验，因此这个指标量化了在页面加载期间，视口中元素的移动程度，由此评价页面的加载效果。
前端常见异常
1、静态资源错误
在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
2、请求异常
Http协议请求状态码>=400时出现请求异常，通过异步请求拉取的静态资源错误亦可归纳到此。
状态码为0时，也会出现请求异常。
请求成功率=请求成功数/总的请求数
3、Js错误
需要重点关注，在页面运行时发生Js错误会严重影响页面正常渲染及交互。
4、白屏异常
有别于前几类异常，此类没有标准的监听方法，通常判断DOM树的结构粗略判断。
常见的白屏发生原因：
1、发生Js错误导致关键资源渲染失败
2、请求异常或静态资源加载失败
3、长时间的Js线程繁忙阻塞渲染任务
结语
前端er是一个面向用户展示价值、提供服务的重要门面岗位，需要我们灵活借助前端监控，认真对待自己的项目产出。部分配图来源于前辈的课件，感谢前辈提供了如此直观详实的课程素材！
