FID是用户首次输入后浏览器开始处理前的阻塞时间，需用PerformanceObserver监听first-input类型事件并设buffered:true来精准捕获；高FID常因微任务堆积、强制同步布局等隐蔽原因导致，非单一长任务。
FID（首次输入延迟）不是靠“等一个长任务”来发现的，而是要捕获用户第一次点击或按键后，浏览器真正开始处理它之前被阻塞的时间。PerformanceObserver 是目前唯一能精准、实时拿到这个值的 API，配合 Performance 面板深入分析，才能定位那些“看不见”的卡顿元凶。
用 PerformanceObserver 正确监听 FID
代码必须在页面早期执行（比如 <head> 中或模块脚本顶部），确保不会错过首个输入事件：
- 监听 type: "first-input"，不是 "event" 或 "navigation"
- 设置 buffered: true，避免因监听器注册晚而漏掉已发生的输入
- 只取 第一个 entry，FID 定义就是“首次”，后续输入不计入
- duration 字段即为真实 FID 值（单位毫秒），无需额外计算
示例代码：
const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {
if (entry.entryType === "first-input") {
console.log("FID:", entry.duration);
// 上报逻辑
break;
}
}
});
observer.observe({ type: "first-input", buffered: true });
为什么 FID 高却找不到长任务？
FID 高 ≠ 存在单个 >100ms 的红色长条。真正的问题往往藏在「微小但密集」的任务堆积中：
- 大量 Promise.then、queueMicrotask 在 FID 前 500ms 内连续触发
- 频繁的强制同步布局（Layout Thrashing），每次只花 2–3ms，但十几轮叠加就超 300ms
- 第三方 SDK 启动时高频调用 setTimeout 或 requestIdleCallback，悄悄占满空闲帧
- CSS 选择器过深或通配符滥用，导致 Recalculate Style 耗时分散却不显眼
用 Chrome Performance 面板精准定位诱因
关键不是看整段录制，而是聚焦 FID 对应输入事件前的 500ms 窗口：
- 录制时勾选 Web Vitals 和 Screenshots
- 回放中找到 FID 对应的 pointerdown 或 keydown 记录，右键 → Scroll to event
- 按住 Shift 向左拖选约 500ms，右键 → Zoom to selection
- 重点统计该窗口内：Script Evaluation + Layout + Recalculate Style + Paint + Microtask 总耗时是否超过 300ms
- 特别留意 “Callback Queue” 和 “Microtask” 折叠项——它们常被忽略，却是挤压输入响应的主力
常见伪装型卡顿模式与应对方向
这些代码单次执行很轻，但在 FID 前集中爆发，直接抬高延迟：
- 自动轮询类 SDK：如埋点、健康检查、实时消息心跳，改用 visibilitychange 触发或降频
- 未节流的 resize / scroll 监听器：尤其绑定在 document 上，每次触发都引发样式重算+布局
- 链式 Promise 处理 DOM：比如 fetch → then(insert) → then(updateStyle) → then(reflow)，拆成 requestAnimationFrame 分帧
- 动态插入含复杂样式的组件：预计算样式、用 will-change 提前提示合成器、避免运行时插入带 :hover/:focus 的 CSS
