这是我参与「第五届青训营」笔记创作活动的第6天。

前端监控

前端监控就是尽可能的采集浏览器从输入URL到页面展示这一过程以及后续用户交互中产出的性能指标
与发生的异常事件并上报到平台完成消费。

前端监控的必要性
    用户使用页面可能会遇到的问题
        页面打开速度较慢；
        网页卡顿；
        图片加载失败；
        网页显示错误；
        ...
    当网页有了前端监控的能力之后
        页面打开速度较慢——页面某个关键资源渲染太慢；
        网页卡顿——页面同步计算任务太重，阻塞渲染；
        资源加载失败——客户端网络状态差，或上游服务器节点异常；
        网页显示错误——页面脚本执行失败、关键资源加载失败、请求失败等；
        ...
    前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

前端监控指标

传统性能指标
    传统的性能指标主要依赖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）
    最大的内容在可视区域内变得可见的时间点；
TBT（Total Blocking Time）
    量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入时间有多久；
CLS（Cumulative Layout Shift）
    量化在页面加载期间，视口中元素的移动程度；