说到前端性能优化，就会看到各个大佬们都会提到各种专业术语，比如什么FP、FCP、LCP等等。网上一查，很多大佬都只会详细的介绍关键的几个阶段（少而精），基本不太好找到全面的解释的文章。那么就让我趁着最近可以摸鱼，来汇总一下。

FP —— First paint（首次绘制）

First Paint 是Paint Timing API的一部分，是页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的中间时，渲染是任何与输入网页导航前的屏幕上的内容不同的内容。它回答了“发生了什么？”这个问题。

一句话解释： FP（First Paint）是指浏览器首次将像素渲染到屏幕上的时间点，也就是页面的第一个像素点被绘制的时间。

FP的发生时机取决于浏览器的渲染机制和页面的结构。当浏览器开始加载页面时，它会解析HTML和CSS，构建DOM和CSSOM树，然后将它们合并为渲染树。当浏览器开始将渲染树渲染到屏幕上时，FP就发生了。在这个时刻，用户可以看到页面上的第一个像素点，也就是FP。通常FP表现为白屏。

FCP —— First Contentful Paint（首次有意义的绘制）

首次内容绘制 (First Contentful Paint, FCP) 是当浏览器从文件物件模型 (DOM) 渲染第一块内容，第一次提供页面正在载入的回馈给使用者。这个问题是「它发生了吗？」当首次内容绘制完成时，答案为「是的」。

一句话解释： FCP(First Contentful Paint)指页面中第一个有意义的渲染内容被绘制的时间点，例如文本、图像等。（白色<canvas>这种属于无意义的内容）

FCP的发生时机也取决于浏览器的渲染机制和页面的结构。当浏览器开始将渲染树渲染到屏幕上时，它会根据渲染树的结构和样式计算出每个元素的位置和大小，然后将这些元素绘制到屏幕上。当第一个有意义的元素被绘制到屏幕上时，FCP就发生了。

FMP —— First Meaningful Paint（首次有效绘制）

First Meaningful Paint (FMP) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded. It is when the answer to “Is it useful?” becomes “yes”, upon first meaningful paint completion.

一句话解释： 是浏览器在加载网页时，第一次将主要内容呈现给用户的时间点。这个时间点通常是用户感知到页面加载速度的关键点之一，用户可以看到页面上的一些内容，并开始与页面进行交互。

本质上FMP是通过一个算法来猜测某个时间点的，所以可能不准确，且在 Lighthouse 6.0中，FMP指标已被弃用。

参考文章：FMP的原理

LCP —— Largest Contentful Paint（最大内容绘制）

The Largest Contentful Paint (LCP) performance metric provides the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.

一句话解释：指的是最大的可见内容元素被呈现出来的时间点。

目前考量的元素类型主要有：

• <img>元素
• 内嵌在<svg>元素内的<image>元素
• <video>元素（使用封面图像）
• 通过url()函数（而非使用CSS 渐变）加载的带有背景图像的元素
• 包含文本节点或其他行内级文本元素子元素的块级元素

上图就是渲染出图片后才到LCP阶段的示例

FP、FCP、FMP、LCP 之间的区别

FP和FCP区别

假设页面为

复制 1less
 2
 3复制代码
 4
 5`<div id="#app">     <header>title</header> </div>`

浏览器渲染到<div id="#app"></div>时，就是FP阶段，再继续往下渲染，渲染到第一个有意义的内容，即header中的内容时，就是FCP阶段
图中第一张白屏为FP，第二张则为FCP。且当页面足够快的时候，FP和FCP是有可能重合的。

FCP和FMP的区别

FCP是首次出现有意义的内容，FMP是呈现了主要内容。当首次出现有意义的内容等于主要内容时，FCP和FMP是属于同一个时间点。

FMP和LCP的区别

FMP是呈现了主要内容，这个时候用户可以和页面进行一定的交互。LCP是呈现最大的可见内容元素。

两者最明显的区别就是有图片时的情况。以背景图为例，页面其他内容基本都已加载完，唯独背景图还未渲染出来时，这个阶段为FMP。当等背景图也渲染出来后，就属于LCP阶段了。

一定程度上，两者也可以是同一个时间点的，且由于主要内容这个概念的难定义，也并不准确，所以在Lighthouse 6.0中，FMP指标已被弃用。因此才引入LCP的概念。

TTI —— Time to interactive（交互时间）

Time to Interactive (TTI) is a non-standardized web performance ‘progress’ metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity.

一句话解释：指用户可以在网页上进行交互的时间点。

若要计算TTI时间，需要以下步骤：

• 先进行FCP
• 沿时间轴正向搜索时长至少为 5秒的安静窗口(安静窗口：没有长任务,且不超过两个正在处理的网络 GET 请求。)
• 沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
• TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。

FCI —— First CPU Idle（首次CPU闲置）

首次 CPU 闲置 (First CPU Idle) 测量当页面进行最小幅度的互动或适当视窗平静到足够处理使用者的输入。它是一个非标准的 Google 网站效能指标。一般来说，它发生在大部分但是非必要的所有可见 UI 元素进行互动时，且使用者界面能做出回应，大多数平均的使用者输入落在 50 毫秒。它也被称为 First interactive。

一句话解释：FCI是指在页面加载期间，当页面的主要内容已经完成加载并且JavaScript代码已经执行完毕后，浏览器第一次空闲的时间点。在这个时间点之后，页面可以响应用户的交互操作，比如点击按钮或输入文本。

TTI 和 FCI 的区别

TTI是整个页面完全加载后，用户可交互时间。FCI是首次可交互的时间。最典型的就是大图渲染，资源都加载好了，浏览器还需要一定时间渲染大图，这个时候和页面进行交互，就是FCI，等大图渲染结束后的交互，就是TTI。

FCI关注的是浏览器空闲的时间点，而TTI关注的是用户可以在网页上进行交互的时间点。

TTFB —— Time to first byte（第一字节时间）

第一字节时间（TTFB）是指从浏览器请求页面到从浏览器接收来自服务器发送的信息的第一个字节的时间。这一次包括 DNS 查找和使用（三次）TCP握手和SSL握手建立连接（如果请求是通过https发出的）。

一句话解释：TTFB是从请求开始到响应开始之间所用的时间，是一个衡量对资源的请求和响应的第一个字节开始和到达之间时间的指标。

网络请求阶段及其相关时间损耗的图示。TTFB测量了startTime和responseStart之间的时间损耗。

FID —— First Input Delay（首次输入延迟）

首次输入延迟 (First input delay, FID) 测量从使用者第一次与你的网站互动（例如当他们单击链接、按钮或是使用自订的 JavaScript 控制），浏览器实际上能够回应此次互动的时间点。它是个在首次使用者于网页互动以及浏览器回应此互动的时间长度 (以毫秒为单位)。卷动与缩放行为都不包含在这个指标。

一句话解释：FID 测量从用户第一次与页面交互，直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。

FID测量页面加载期间响应度，它针对的交互是不连续操作对应的输入事件，如点击、轻触和按键。其他诸如滚动和缩放之类的交互属于连续操作并不包含在她的测量内。

DCL —— DOMContentLoaded（文档内容加载完成）

DCL：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

一句话解释：DCL指的是HTML文档中的DOM树构建完成、CSS文件加载完成并解析、JavaScript文件加载完成并执行的时间点，它表示网页的主要内容已经加载完成，可以开始进行交互和操作。

开发者可以使用JavaScript代码来监听DCL事件，并在该事件触发后执行一些操作，例如修改DOM元素、加载其他资源等。

SI —— Speed Index （速度指数）

Speed Index (SI) is a page load performance metric measuring how quickly the contents of a page are visibly populated. Speed Index is dependent on size of the viewport and expressed in milliseconds: the lower amount of time the better the score.

一句话解释：SI表示页面在加载过程中的视觉渲染速度，表示页面在加载过程中，每秒钟呈现的像素数量的平均值。SI越低，表示页面的视觉渲染速度越快。

CLS —— Cumulative Layout Shift（累积布局偏移）

CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。

一句话解释：CLS就是页面上肉眼可见的元素发生了布局上的偏移后，经过一系列计算方式得出的一个分数。最常见的也是图片或其他媒体文件动态动态生成后，挤占了原本内容的位置，导致原内容往下移动。

复制 1布局偏移分数 = 影响分数 * 距离分数

计算方式详细内容查阅布局偏移分数

TBT —— Total Blocking Time（总阻塞时间）

总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。

一句话解释：TBT指的是页面在加载过程中，所有JS代码执行所造成的页面阻塞时间的总和。这个指标的值越小，表示页面的JS代码执行速度越快，用户体验越好。相反，如果页面的JS代码执行速度慢，可能会导致页面阻塞，影响用户体验。