First Paint（FP）是第一个关键时刻，然后是 First Contentful Paint（FCP）。这些指标标记了导航结束后，浏览器在屏幕上渲染像素时的那一时刻。这对用户来说很重要，因为它回答了这样一个问题：它正在发生吗?
这两个指标之间的主要区别是，FP 标记浏览器渲染出任何与导航前屏幕上不同的东西的时刻。相比之下，FCP 是浏览器渲染第一个 DOM 内容的时刻，它可能是文本、图像、SVG，甚至是 canvas 元素。
使用例子
var observer = new PerformanceObserver(function(list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
// Process entries
// report back for analytics and monitoring
// ...
}
});
// register observer for long task notifications
observer.observe({entryTypes: ["paint"]});
概要
本文档定义了一个 API，用于在页面加载过程中捕获开发人员所关心的一系列关键时刻(First Paint、First Contentful Paint)。
介绍
加载不是一个单一的时间点——这是一种没有任何一个指标能够完全量化的用户体验。在加载过程中有多个时刻会影响用户是“快”还是“慢”。
First Paint（FP）是第一个关键时刻，然后是 First Contentful Paint（FCP）。这些指标标记了导航结束后，浏览器在屏幕上渲染像素时的那一时刻。这对用户来说很重要，因为它回答了这样一个问题：它正在发生吗?
这两个指标之间的主要区别是，FP 标记浏览器渲染出任何与导航前屏幕上不同的东西的时刻。相比之下，FCP 是浏览器渲染第一个 DOM 内容的时刻，它可能是文本、图像、SVG，甚至是 canvas 元素。
使用例子
术语
Paint：当浏览器将渲染树转换为屏幕上的像素时，它完成了“paint”（或“render”）。正式定义为在事件循环处理中发生“更新渲染”的时刻。