如何获取页面第一次绘制的时间答案

【问题标题】：How to get time of page's first paint如何获取页面第一次绘制的时间
【发布时间】：2017-06-05 08:37:05
【问题描述】：

虽然从开发工具获取firstPaint 次很容易，但有没有办法从 JS 获取时间？

【问题讨论】：

【解决方案1】：

是的，这是paint timing API 的一部分。

您可能想要first-contentful-paint 的时间，您可以使用它：

const paintTimings = performance.getEntriesByType('paint');
const fmp = paintTimings.find(({ name }) => name === "first-contentful-paint");
enter code here
console.log(`First contentful paint at ${fmp.startTime}ms`);

【讨论】：

请注意，这目前仅适用于 Chrome：developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming

【解决方案2】：

最近新的浏览器 API（如 PerformanceObserver 和 PerformancePaintTiming）使通过 Javascript 检索 First Contentful Paint (FCP) 变得更加容易。

我创建了一个名为 Perfume.js 的 JavaScript 库，它只需要几行代码

const perfume = new Perfume({
  firstContentfulPaint: true
});
// ⚡️ Perfume.js: First Contentful Paint 2029.00 ms

我知道您询问了 First Paint (FP)，但建议您改用 First Contentful Paint (FCP)。

这两个指标的主要区别在于 FP 标记点当浏览器呈现任何视觉上不同的东西时在导航之前出现在屏幕上。相比之下，FCP才是重点当浏览器从 DOM 渲染第一部分内容时，可以是文本、图像、SVG，甚至是画布元素。

【讨论】：

【解决方案3】：

if(typeof(PerformanceObserver)!=='undefined'){ //if browser is supporting
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
     console.log(entry.entryType);
     console.log(entry.startTime);
     console.log(entry.duration);
   }
  });
  observer.observe({entryTypes: ['paint']});
}

这将帮助您在启动 js 应用程序之前粘贴此代码。

【讨论】：