如果坚持做一件事就要把目标放低一点，确保自己可以实现，不要把目标定的很高，让人高不可攀，无法坚持

大家好，我是柒八九。

前言

今天我们来聊聊另外一个比较重要的性能指标FID。

如果想了解该系列文章(浏览器底层原理&优化方案)，可以参考我们已经发布的文章。如下是往期文章。

1. 页面是如何生成的(宏观角度)
2. Chromium 最新渲染引擎--RenderingNG
3. RenderingNG中关键数据结构及其角色
4. 浏览器之客户端存储
5. 浏览器_知识点精讲
6. 像素是怎样练成的
7. 浏览器之资源获取优先级(fetchpriority)
8. 浏览器之性能指标_FCP
9. 浏览器之性能指标-LCP
10. 浏览器之性能指标-CLS

你能所学到的知识点

1. 前置知识点
2. FID是个啥
3. 为什么会出现输入延迟呢
4. FID VS TTI
5. FID 有助于SEO
6. FID 得分
7. 优化FID得分
8. 测量FID
9. 最大潜在首次输入延迟
10. 能否在Lighthouse测量 FID ?

好了，天不早了，干点正事哇。

1. 前置知识点

前置知识点，只是做一个概念的介绍，不会做深度的解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。如果大家对这些概念熟悉，可以直接忽略

用户输入事件

当用户在浏览器中与网页进行交互时，会触发许多用户输入事件，这些事件会触发浏览器的渲染过程。

鼠标事件 (Mouse Events)

键盘事件 (Keyboard Events)

表单元素事件 (Form Element Events)

触摸事件 (Touch Events)

仅适用于支持触摸屏的设备

这些用户输入事件可以通过JavaScript绑定到特定的页面元素上，然后在事件触发时执行相应的操作。浏览器会根据这些事件的触发，执行相应的渲染和交互操作，以实现用户与网页的交互体验。

TTI

TTI:是Time to Interactive的简写，中文名称可交互时间。

它用于衡量网页加载完成后，用户可以与页面进行交互的时间。它是页面加载过程中的一个关键度量标准，更准确地反映了用户实际体验的时间点。

TTI指标包含两个要素：

1. 加载完成时间 (Load Event End)：指浏览器完成文档加载的时间点。也就是整个网页及其所有资源（如CSS、JavaScript、图像等）都已下载完成，但不一定是所有资源都已经执行完毕。
   
2. 主线程空闲时间 (Main Thread Idle Time)：指主线程空闲并且可以响应用户输入的时间点。这意味着网页的JavaScript执行已经完成，没有长时间的阻塞操作，并且页面可以对用户的交互事件作出快速响应。
   

TTI可以视为用户可以与网页完全交互的时间点，而不会感到页面过于卡顿或响应缓慢。更短的TTI意味着用户能够更快地开始浏览、点击按钮或输入内容，提高用户体验和页面的互动性。

SEO

SEO（Search Engine Optimization，搜索引擎优化）是一种通过优化网站和其内容，以提高网站在搜索引擎中的排名和曝光度的策略和技术。

目标是使网站在用户搜索相关关键词时，能够在搜索引擎结果页面中获得更好的展示位置，从而吸引更多的有针对性的访问流量。

SEO的主要目的是让搜索引擎更好地理解网站内容，并认为网站提供的信息对用户有价值，进而将其排名靠前。通过遵循搜索引擎的规则和准则，提供高质量的内容和良好的用户体验，可以提高网站在搜索结果中的可见性和排名。

navigator.sendBeacon

navigator.sendBeacon 是一个用于在浏览器中发送异步请求的 API。它的作用是在页面卸载前（例如用户离开当前页面或关闭页面）尽可能可靠地发送数据，以确保在这种情况下也能成功发送数据。

与常见的 Ajax 请求（例如使用 XMLHttpRequest 或 fetch）不同，navigator.sendBeacon 的主要优势是它不会阻止页面卸载。当浏览器正在关闭或导航到另一个页面时，常规的异步请求可能不会完成，因为浏览器会在这些请求完成之前中止连接。但是，navigator.sendBeacon 通过将数据放入浏览器的发送队列，允许在页面卸载时继续异步发送数据。

这使得 navigator.sendBeacon 特别适合在用户离开页面时需要进行后台数据记录或分析的情况。通常在发送分析数据或日志数据等不需要立即得到响应的情况下使用。

使用 navigator.sendBeacon 时要注意以下几点：

• 由于 navigator.sendBeacon 是异步执行的，它不会等待服务器的响应，因此无法得知请求是否成功。因此，它主要用于日志记录和数据追踪等情况，不适合需要服务器响应的场景。
• 发送的数据必须是 Blob、BufferSource、FormData 或者字符串类型的数据。
• 由于 navigator.sendBeacon 发送的是 POST 请求，因此服务器端应该能够处理 POST 请求，并相应地解析数据。

我们通过一个简单的示例来介绍一下它的用法：

const data = {
  event: 'button_click',
  timestamp: new Date().toISOString(),
  user_id: '前端789',
};
const body = JSON.stringify(data);
if (navigator.sendBeacon) {
  // 使用 sendBeacon 发送数据
  const isDataSent = navigator.sendBeacon('/log', body);
  if (isDataSent) {
    console.log('数据已成功发送。');
  } else {
    console.log('数据发送失败。');
  }
} else {
  // 如果浏览器不支持 sendBeacon，则使用 fetch 作为备选方案
  fetch('/log', { method: 'POST', body })
    .then(() => console.log('数据已成功发送。'))
    .catch((error) => console.error('数据发送失败：', error));
}

上面的内容，算是这篇文章的开胃菜，而下面的内容，是我们今天才是我们今天的四菜一汤。

2. FID 是个啥

FID:是First Input Delay的简写，中文名称首次输入延迟。是核心 Web 指标之一，用于衡量网页交互性的网络性能指标

它是一个真实用户网页性能指标，用于追踪用户在进入网页后首次与网页进行交互的时间，直到浏览器开始处理该交互（即浏览器的主线程空闲时）。

这两个事件之间的时间称为Input Delay（也称为Input Latency） - 中文翻译为： 输入延迟

换句话说，FID反映了用户交互（例如点击或触摸链接或按钮）和浏览器响应我们的操作并开始处理它之间的延迟时间。

想象一下，当我们访问京东或者淘宝并期望某个元素立即打开时，但是我们点击的超链接却对我们的请求无动于衷。从技术上讲，这是因为浏览器的主线程正在处理其他请求，它此时也分身乏术。

FID所测量的用户输入事件必须是离散的（有限的）。

连续类型的用户交互，如缩放或滚动页面，无法准确地使用该指标进行测量。这是因为它们通常不在浏览器的主线程上运行并具有不同的约束条件。

这点可以参考我们之前聊过的关于像素是怎样练成的中图层提升（Layer Promotion)的部分

下面的图，很好的解释了，当用户首次加载后，在点击元素时，出现无法及时响应用户事件的原因。

FID仅测量第一个用户交互

FID可以说是我们网站的脸面。用户首次与我们的页面进行交互对于他们对网页性能的体验和感知至关重要。

此外，大多数阻塞浏览器主线程的情况发生在网页生命周期的最初时刻，也就是加载关键资源的时候。FID是一个帮助我们解决这个问题的指标，确保加载这些关键资源不会使我们的网站感觉笨重和反应迟钝。

FID测量的是输入延迟，而不是处理延迟

FID并不测量由于用户交互而导致的网页实际处理或更新。这是因为开发人员可以通过将事件处理程序与与事件相关的任务分离来操纵FID。

3. 为什么会出现输入延迟呢

输入延迟(Input Delay)是指在没有用户请求的情况下加载页面元素，例如图像或脚本。

当用户访问一个网页时，浏览器会加载页面中包含的各种资源，如图像、脚本、样式表等。通常情况下，这些资源是根据页面的内容和结构进行请求和加载的。

然而，在某些情况下，这些资源可能会在没有用户直接请求的情况下被加载。例如，当网页中的脚本文件被设置为自动加载，并且不是在用户直接与网页交互时才加载，就会导致输入延迟。这意味着用户在浏览网页时，可能会遇到加载资源导致的页面反应迟钝或交互体验受阻的情况。

根据谷歌的说法，导致长时间输入延迟的原因之一是JavaScript执行。特别是对于需要在运行任何事件监听器之前由浏览器执行的大型JavaScript文件。

为什么会这样呢？因为正在加载的JavaScript代码可以改变浏览器的后续操作。

当浏览器等待确定下一步操作时，它会导致网站反应迟钝，从而增加输入延迟。这就像浏览器被困在一个交通拥堵中，通过最小化JavaScript文件可以提高流畅性。这样可以减少浏览器注册事件所需的时间。

4. FID VS TTI

TTI衡量的是页面完全可交互所需的时间，而FID则追踪页面完全可交互之前的用户输入。

当页面上已经呈现了有价值的内容（通过FCP进行测量），大多数页面元素都已注册事件处理程序，并且用户交互在50毫秒内得到处理时，就会注册TTI。

TTI在Lighthouse中显示。

与此同时，FID可以追踪例如当用户点击一个链接时，该链接出现在大多数页面元素的事件处理程序注册之前。与TTI不同，FID允许我们捕捉到那些早期的、关键的交互。

5. FID 有助于SEO

1. FID是最令人兴奋的网络性能指标之一，因为它是一个纯粹的真实用户指标。它无法在实验室测试中进行模拟，因为它需要实际用户的输入才能进行测量。FID关乎真实用户在进入我们的页面时的体验。
   
2. 作为一个真实用户指标，监测和优化FID非常重要，因为它定义了我们网站的用户体验。
   
3. FID现在是谷歌的官方排名因素之一。

• FID是追踪网站响应性
• CLS追踪视觉稳定性
• LCP追踪加载速度

当谷歌于2021年6月开始使用核心网页要素作为排名算法的一部分时，FID成为了其中之一。

6. FID 得分

研究表明，100毫秒的延迟被认为是由相关源（Associated Source）引起的。0.1秒是用户感觉系统反应即时的极限时间。

相关源（Associated Source），在网络性能和Web Vitals度量中，是指与用户输入延迟（Input Delay）或其他性能指标相关的资源或任务。

基于这些原因，最好尽量将我们的FID控制在100毫秒以下。

以下是谷歌在PageSpeed Insights中为FID设定的阈值：

• FID在100毫秒或以下被认为是良好的；
• FID在100-300毫秒之间需要改进；
• FID超过300毫秒被认为是较差的。

根据这些阈值，我们可以评估并改进我们的网页在FID方面的表现。

浏览器仍然需要运行与用户输入相关的任务，而FID并不测量这部分时间。因此，在某些情况下，我们的FID可能在100毫秒以下，但页面仍然可能会感觉有些反应迟钝。