首次输入延迟 (FID) 是衡量负载响应能力的一个重要的、以用户为中心的指标，因为它量化了用户尝试与无响应页面交互时的体验——低 FID 有助于确保页面可用。
我们都知道给人留下良好的第一印象是多么重要。这在结识新朋友时很重要，在网络上建立体验时也很重要。
在网络上，良好的第一印象可以决定某人成为忠实用户还是离开并永远不会回来。问题是，什么才能给人留下好印象，您如何衡量您可能会给用户留下什么样的印象？
在网络上，第一印象可以有很多不同的形式——我们对网站的设计和视觉吸引力有第一印象，也有对其速度和响应能力的第一印象。
虽然很难通过 Web API 来衡量用户对网站设计的喜爱程度，但衡量其速度和响应能力却并非如此！
用户对使用First Contentful Paint (FCP)衡量网站加载速度的第一印象。但是您的网站在屏幕上绘制像素的速度有多快只是故事的一部分。同样重要的是当用户尝试与这些像素进行交互时，您的网站的响应能力如何！
首次输入延迟 (FID) 指标有助于衡量用户对您网站的交互性和响应性的第一印象。
什么是 FID？#
FID 测量从用户第一次与页面交互（即当他们单击链接、点击按钮或使用自定义的、由 JavaScript 驱动的控件）到浏览器实际能够开始处理事件处理程序的时间以回应这种互动。
什么是好的 FID 分数？#
为了提供良好的用户体验，网站应努力将首次输入延迟设为100 毫秒或更短。为确保您的大多数用户都能达到此目标，一个很好的衡量阈值是页面加载的第 75 个百分位数，在移动设备和桌面设备之间进行细分。
要了解有关此建议背后的研究和方法的更多信息，请参阅：定义 Core Web Vitals 指标阈值
FID 详细#
作为编写响应事件的代码的开发人员，我们经常假设我们的代码会立即运行——一旦事件发生。但作为用户，我们都经常遇到相反的情况——我们在手机上加载了一个网页，试图与之交互，然后什么也没发生，却很沮丧。
一般来说，输入延迟（又名输入延迟）的发生是因为浏览器的主线程忙于做其他事情，所以它（还）不能响应用户。这可能发生的一个常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript 文件。当它这样做时，它不能运行任何事件侦听器，因为它加载的 JavaScript 可能会告诉它做其他事情。
陷阱！
FID 仅测量事件处理中的“延迟”。它不会测量事件处理时间本身，也不会测量浏览器在运行事件处理程序后更新 UI 所花费的时间。虽然这段时间确实会影响用户体验，但将其作为 FID 的一部分会激励开发人员异步响应事件——这会改善指标，但可能会使体验变得更糟。了解为什么只考虑下面的输入延迟以获取更多详细信息。
考虑以下典型网页加载的时间线：
上面的可视化显示了一个页面，该页面正在对资源（最有可能是 CSS 和 JS 文件）发出几个网络请求，并且在这些资源下载完成后，它们在主线程上进行处理。
这会导致主线程暂时处于忙碌状态，这由米色任务块指示。
较长的首次输入延迟通常发生在首次内容绘制 (FCP)和可交互时间 (TTI) 之间，因为页面已呈现其部分内容，但尚未实现可靠的交互。为了说明这是如何发生的，FCP 和 TTI 已添加到时间线中：
您可能已经注意到FCP 和 TTI 之间有相当长的时间（包括三个长任务），如果用户在这段时间内尝试与页面交互（例如单击链接），则在收到点击并且当主线程能够响应时。
考虑如果用户在最长任务开始附近尝试与页面交互会发生什么：
因为输入发生在浏览器正在运行任务的过程中，所以它必须等到任务完成才能响应输入。它必须等待的时间是此页面上此用户的 FID 值。
在这个例子中，用户恰巧在主线程最繁忙时段开始时与页面交互。如果用户刚才（在空闲期间）与页面进行了交互，浏览器可能会立即做出响应。输入延迟的这种差异强调了在报告指标时查看 FID 值分布的重要性。您可以在以下有关 FID 数据分析和报告的部分中阅读更多相关信息。
如果交互没有事件侦听器怎么办？#
FID 测量接收输入事件与主线程下一次空闲之间的增量。这意味着即使在尚未注册事件侦听器的情况下，也会测量 FID 。原因是因为许多用户交互不需要事件侦听器，但确实需要主线程空闲才能运行。
例如，在响应用户交互之前，以下所有 HTML 元素都需要等待主线程上正在进行的任务完成：
- 文本字段、复选框和单选按钮 ( ,
若有收获，就点个赞吧
0 人点赞
