javascript - 如何获取页面第一次绘制的时间

Question

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

Answer 1

是的，这是绘制时间 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`);

Answer 2

最近，PerformanceObserver和PerformancePaintTiming等新的浏览器 API使得通过 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，甚至是画布元素。

Answer 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 应用程序之前将此代码粘贴到其他所有内容之前。