【性能监控】计算 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, 'list --- observer')
  const element = list.getEntries()
  element.forEach(item => {
    console.log(`entryType: ${item.entryType},name: ${item.name}, startTime: ${item.startTime}`)
  })
}

3. 定义要观察的目标对象

observer.observe({
  entryTypes: ['resource']
})

entryTypes 枚举如下： 

list 打印如下： 

官方解释： PerformanceObserver() 构造函数使用给定的观察者 callback 生成一个新的 PerformanceObserver 对象.当通过 observe() 方法注册的 条目类型 的 性能条目事件 被记录下来时,调用该观察者回调. 

计算：前端性能监控（一）指标收集 | CaelumTian的博客

待研究