FID 是用户首次交互到浏览器开始处理事件的延迟，需用 PerformanceObserver 监听 first-input 类型条目计算，不能用 performance.now() 或 timing 推导，因依赖真实用户操作时机。
首次交互时间（First Input Delay，FID）衡量的是用户首次与页面互动（如点击、输入、触摸）到浏览器实际开始处理该事件之间的时间延迟。它反映主线程是否被长时间任务阻塞，是核心 Web 指标（Core Web Vitals）之一，直接关联用户体验流畅度。
为什么不能用 performance.now() 或 timing 直接算 FID
FID 不是某个固定时间点，而是“用户触发”和“浏览器响应”之间的差值，必须在真实用户操作发生时捕获。它无法从 navigation 或 paint 类条目中推导，也不能靠预设时间戳估算——因为用户何时点击完全不可预测。
关键限制：
- timing 对象不包含输入事件数据：performance.timing 和 getEntriesByType('navigation') 都不记录用户输入行为
- 不能监听 window.onload 后才开始采集：FID 可能发生在页面加载完成前（比如用户在 LCP 前就点了按钮），错过即丢失
- 不能依赖 setTimeout 或 requestIdleCallback 模拟：这些只是调度机制，无法替代真实输入时机
正确方式：用 PerformanceObserver 监听 first-input
现代浏览器支持 type: 'first-input' 的 PerformanceEntry，它会在用户首次触发可交互事件（click/touchstart/input/keydown 等）且存在处理延迟时自动创建条目：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// entry.name === 'first-input'
console.log('FID:', entry.processingStart - entry.startTime);
// 上报逻辑（如发送到监控平台）
}
});
observer.observe({ type: 'first-input', buffered: true });注意细节：
- entry.startTime 是用户触发事件的精确时间（毫秒级精度）
- entry.processingStart 是浏览器真正开始执行事件回调的时间
- 差值即为 FID（单位毫秒），若为 0 表示无延迟，主线程空闲
- buffered: true 确保页面加载早期发生的 first-input 不被丢弃
兼容性兜底与常见误区
部分旧版浏览器（如 Safari 14.1 之前）不支持 'first-input' 类型。此时可手动监听事件并计算延迟，但需谨慎：
- 仅监听 document 上的 click、keydown、input 等原生事件，避免绑定在具体按钮上（可能漏掉首点）
- 用 performance.now() 记录 startTime，再在事件回调开头立即记录 processingStart
- 只记录第一个非合成事件（排除 focus、scroll 等非交互意图事件）
- 需过滤掉 页面隐藏期间触发的事件（检查 document.visibilityState）
不推荐的做法：用 domInteractive 或 loadEventEnd 代替 FID —— 这两个是页面就绪信号，不是用户响应指标，数值可能远小于真实交互延迟。
FID 与 TTI、INP 的关系说明
FID 已被 INP（Interaction to Next Paint） 逐步取代（Chrome 126+ 默认启用）。INP 覆盖整个生命周期内最差的一次交互延迟（不只是首次），更能反映长期体验。但 FID 仍被多数监控平台支持，且对老版本浏览器更友好。
TTI（Time to Interactive）是实验室指标，基于主线程空闲窗口推算，无法在真实用户场景中准确采集，不应与 FID 混用。
