【性能监控】FCP (首次内容绘制时间)

含义

FCP (First Contentful Paint) 为首次有内容渲染的时间点，在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为无内容时间，一般 FCP >= FP。

标记的是浏览器渲染第一桢内容 DOM 的时间点，该内容可能是文本、图像、SVG 或者 <canvas> 等元素

计算

setTimeout(() => {

  var fcp = performance.getEntriesByType('paint').filter((item) => {
    return item.name === 'first-contentful-paint'
  })[0].startTime.toFixed(2)
  console.log(fcp, 'fcp')
  
}, 2000)

同理：SPA 也不是很适用

在页面不太复杂的情况下 fp === fcp

如果页面复杂 fp < fcp