背景
目前现有的监控平台针对H5在线应用，提供的可监控指标较少，特别是在性能指标这块，因此当我们有H5在线应用时，没办法做到更全面的性能数据监控，更没办法针对不同的维度去做性能优化。
其实之前在携程的时候，也做过H5性能监控，但是针对指标这块，并没有非常详细地去深入研究过，正好借这个机会，好好整理了一下，现在分享给大家。
什么是应用监控
Synthetic monitoring
定义
合成监控，也称为定向或主动监控，通过模拟用户来访问或使用应用程序，通常我们会借助一些工具来监控，包括简单的ping来判断服务器是否已启动。
在H5的应用场景下，我们有以下工具可以使用：
示例
Lighthouse
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
PageSpeed Insights
PSI跑分内部也是集成了LightHouse，所以分值差异不大
添加图片注释，不超过 140 字（可选）
Real-User Monitoring
定义
真实用户监控，也称为被动监控，收集来自真实用户交易的数据的技术，因此被监控的只是真实用户正在做的事情。
示例
Lego（蚂蚁内部监控平台）
添加图片注释，不超过 140 字（可选）
如何做真实用户监控
关键性指标
Core Web Vitals
Web Vitals是Google的一项计划，目的是为了统一衡量性能的标准，并提出一些核心性能指标，以此作为参考，从而定义页面的体验质量，而这些核心性能指标，就是Core Web Vitals。
（目前最新的三个指标是在2020年定义的）
添加图片注释，不超过 140 字（可选）
这些指标的价值？
添加图片注释，不超过 140 字（可选）
如何测量这些指标？
添加图片注释，不超过 140 字（可选）
Largest Contentful Paint（LCP）
添加图片注释，不超过 140 字（可选）
一、定义
最大内容绘制完成时间，即在用户的可见窗口内的最大的图片元素或块级元素的渲染时间，主要考虑的元素有以下这些
-
<img>元素
-
<image>元素内的<svg>元素
-
<video>元素
-
CSS中通过url()加载背景图片的元素
-
包含文本节点或其他内联级文本元素子级的块级元素
二、作用
该指标用来衡量页面加载的性能体验。
三、价值&重要性
-
对于load或DOMContentLoaded这些指标，并不能表示用户已经看到了页面主要内容；
-
对比First Contentful Paint（FCP），FCP也仅仅是捕获的最开始的加载体验耗时；
-
对比First Meaningful Paint（FMP），FMP含义太抽象了，指标比较复杂，难以计算；
四、分值
-
<2.5S：较优
-
2.5S ~ 4S：待提升
-
>4S：较差
五、示例
添加图片注释，不超过 140 字（可选）
六、获取
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP candidate:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});
First Input Delay（FID）
添加图片注释，不超过 140 字（可选）
一、定义
首次输入延迟，即从用户第一次与页面交互（如点击链接、点击按钮或使用自定义的由JavaScript自驱动的控件）到浏览器实际能够开始处理事件的时间间隔。
二、作用
该指标用来衡量页面的交互的性能体验。
三、价值&重要性
-
第一次的交互延迟将会大大地影响用户对于页面质量的整体印象，因此这段耗时很重要
-
通常最大的交互问题往往发生在页面初始化加载的过程中
四、分值
-
<100ms：较优
-
100ms ~ 300ms：待提升
-
>300ms：较差
五、示例
添加图片注释，不超过 140 字（可选）
通常情况下，页面加载时会发出多个请求去加载资源（CSS、JS），黄色代表此时主线程正在忙碌中
添加图片注释，不超过 140 字（可选）
这个时候其实已经有部分页面内容加载出来了（FCP），但是距离页面真正可交互时间Time to Interactive（TTI）的节点还有一段时间。
添加图片注释，不超过 140 字（可选）
而此时如果用户进行了点击或输入操作，主线程实际上会将该任务挂起，在部分资源加载执行完成后才执行该任务，因此这时候就有了First Input Delay（FID）耗时。
（为什么FID只计算点击或输入操作延时？而不是页面滚动、手势滑动这些操作）
添加图片注释，不超过 140 字（可选）
原因是因为浏览器的Event Loop事件模型决定了这两类的区别，不同类型的事件处理方式是不同的，点击和输入是属于离散事件（不连续的），而页面滚动这类是属于连续事件，它们会和UI事件任务队列进行调度、合并，浏览器会有单独的UI线程去处理这些任务，因此不会有较大的延迟，因此我们需要重点关注的是那些离散事件。
六、获取
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const delay = entry.processingStart - entry.startTime; console.log('FID candidate:', delay, entry); } }).observe({type: 'first-input', buffered: true});
Cumulative Layout Shift（CLS）
添加图片注释，不超过 140 字（可选）
一、定义
累积布局偏移，即量化用户在整个页面生命周期过程中发生的布局偏移的情况。
二、作用
该指标用来衡量页面视觉的稳定性。
三、价值&重要性
上传视频封面
好的标题可以获得更多的推荐及关注者
四、分值
-
<0.1：较优
-
0.1 ~ 0.25：待提升
-
>0.25：较差
五、示例
得分方式
添加图片注释，不超过 140 字（可选）
impact fraction：影响分数，即前一帧和后一帧对比，所有位置发生变化的元素，在可视窗口内所影响的面积占窗口总面积的比例；
distance fraction：距离分数，即前一帧和后一帧对比，所有位置发生变化的元素，它们在屏幕竖直方向或水平方向上发生的位移（唯一的距离去较大的），占可视窗口的总高度/宽度的比例；
举个例子
添加图片注释，不超过 140 字（可选）
这个元素在加载过程中发生了位置的偏移，该元素整体面积大小占屏幕尺寸的50%，大概偏移了25%的高度，因此整个受影响的区域面积占比即为75%，因此impact fraction（影响分数）即为0.75；
而竖直方向位移了25%，因此distance fraction（距离分数）即为0.25；
所以这次CLS最终计算得分是：0.75 * 0.25 = 0.1875
六、获取
let clsValue = 0; let clsEntries = []; let sessionValue = 0; let sessionEntries = []; new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Only count layout shifts without recent user input. if (!entry.hadRecentInput) { const firstSessionEntry = sessionEntries[0]; const lastSessionEntry = sessionEntries[sessionEntries.length - 1]; // If the entry occurred less than 1 second after the previous entry and