网页性能指标

几个关键词：
FCP、LCP、TTI、FID、TBT

什么是FCP

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，”内容”指的是文本、图像（包括背景图像）、svg元素或非白色的canvas元素。（白屏时长）

FCP时长的定义

要在 JavaScript 中测量 FCP，您可以使用绘制计时 API。以下示例说明了如何创建一个PerformanceObserver来侦听名称为first-contentful-paint的paint条目并记录在控制台中。

当然也可以使用 web-vitals 来完成这一步骤

COPY

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

如何优化FCP

减少阻塞渲染的资源
减少CSS、优化CSS选择器
避免页面重定向
预加载关键请求
减少DOM嵌套
合理使用浏览器缓存

资源预加载 link rel=”preload”

COPY

1 2	<link rel="preload" href="styles.css" as="style" /> <link rel="preload" href="ui.js" as="script" />

DNS预解析

COPY

1	<link rel="dns-prefetch" href="https://example.com" />

什么是LCP

最大内容绘制，可视区域中最大内容元素变渲染到页面上所需的时间点。

什么是FID

FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
一般建议FID的时长为100ms以内
brower cache

一般来说，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以（还）不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript 文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript 可能会让浏览器去执行其他工作。

FID时长的定义

FID 测量接收到输入事件的时间点与主线程下一次空闲的时间点之间的差值。这就意味着即使在尚未注册事件侦听器的情况下，FID 也会得到测量。这是因为许多用户交互的执行并不需要事件侦听器，但一定需要主线程处于空闲期。

如何优化FID

减少第三方代码的影响
减少 JavaScript的执行时间
最小化主线程工作
减少请求数，降低请求资源大小

什么是TBT

总阻塞时间TBT 是指FCP根TTI的时间总和，这期间，主线程被阻塞的时间过长，无法作出输入响应。

每当出现长任务（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作”阻塞状态”。我们说主线程处于”阻塞状态”是因为浏览器无法中断正在进行的任务。因此，如果用户在某个长任务运行期间与页面进行交互，那么浏览器必须等到任务完成后才能作出响应。

如果任务时长足够长（例如超过 50 毫秒），那么用户很可能会注意到延迟，并认为页面缓慢或卡顿。

TBT时长的定义

我们将运行超过59ms的任务称之为长任务，将多个长任务超过 50ms 的部分称之为TBT

如何优化TBT

大致来说，TBT与FID的优化方向基本相同，因为某种意义上，两者的指标都取决于长任务在主线程上耗费的资源大小。