【性能监控】计算 FMP（First Meaningful Paint）

（一）含义

FMP（First Meaningful Paint），即首次绘制有意义内容的时间

FMP 衡量了用户看到网页的主要内容的时间，是用户体验角度的一种重要的衡量指标

主角元素可以是视频网站的视频控件，内容网站的页面框架也可以是资源网站的头图等

FMP 的时间点为 「DOM 结构变化最剧烈的时间点」

前端业界现在比较认可的一个计算 FMP 的方式就是「认定页面在加载和渲染过程中最大布局变动之后的那个绘制时间即为当前页面的 FMP 」

（二）PerformanceObserver

PerformanceObserver: 性能观察者

使用PerformanceObserver API主要需要三个步骤：

1. 创建观察者

const observer = new PerformanceObserver(callback)

2. 定义回调函数

const callback = (list, observer) => {
  console.log(list, observer, &#