这是我参与「第五届青训营 」笔记创作活动的第12天
一、本堂课重点内容：
- 了解前端监控是做什么，做前端监控有什么价值
- 了解 Navigation Timing 和 Navigation Timing 2 的相关字段
- 了解 Performance 与 Performance observer 对象
- 了解 addEventListener 与 removeEventListener 这两个函数
- 了解什么叫做 hook
- 了解什么叫做链式调用
二、详细知识点介绍：
1. 了解前端监控是做什么，做前端监控有什么价值
前端监控就是尽可能的采集这一过程以及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。能过通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析和归因。
2. 概述：前端监控之常用性能指标
- 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 Blockingh Time):量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的事件有多久。
长任务：如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间。 一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和。
CLS(Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。
3. 概述：前端监控之前端常见异常
- 静态资源错误
静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。 静态资源错误：在拉去和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常：
Js错误：在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点。
白屏异常：前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所有更考验前端监控开发者的工地。通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生。
监听到白屏发生后，我们还需要对白屏的发生进行归因、
通常导致白屏发生的原因可能有如下几点：
- 发生Js错误导致关键资源渲染失败。2. 请求异常或静态资源加载失败。3. 长时间的Js线程繁忙阻塞渲染任务。
三、实践练习例子：
4. 小试牛刀：监控前端性能与异常
5. 渐入佳境：封装一个通用的sdk
封装一个用于给监控器上报已收集数据的上报函数
Navigator.sendBeacon()是专为前端监控打造的请求函数
四、课后个人总结：
- 这篇文章介绍了怎么监控前端性能与异常，说明了一些相关知识点和概念。
- 这堂课有着详细的实践练习例子，能够在看代码中熟悉相关概念，易于接收。
- 在前端的工作中，无论是安全性还是对错误的纠正能力，以及后续对性能的提升能力，都是必须要掌握的重要知识。
