FP(First Paint),表示渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。
FCP(First Contentful Paint),表示渲染出第一个内容,这里的“内容”可以是文本、图片、canvas。
FMP(First Meaningful Paint),首次渲染有意义的内容的时间,“有意义”没有一个标准的定义,FMP的计算方法也很复杂。
FP、FCP都可以通过performance API计算
// FP
const fp = performance.getEntries('paint').filter(entry => entry.name == 'first-paint')[0].startTime;
// FCP
const fcp = performance.getEntries('paint').filter(entry => entry.name == 'first-contentful-paint')[0].startTime;
FMP计算比较复杂,lighthouse的计算的大体思路是,将页面中最大布局变化后的第一次渲染事件作为FMP事件,并且计算中考虑到了可视区的因素。
FMP计算过于复杂,没有现成的performance API,如果希望在监控中上报这个指标,可以自己使用MutationObserver计算。