FID（First Input Delay）衡量用户首次触发click、keydown、mousedown、touchstart事件到浏览器主线程开始执行回调的时间差，反映主线程阻塞程度；需手动监听计算，不可直接用performance.getEntriesByName('first-input')获取。
直接用 performance.getEntriesByName('first-input') 拿不到真正的 FID 值，因为它的 duration 是事件处理耗时，不是用户触发到浏览器开始处理之间的排队延迟。要准确评估首次交互的响应灵敏度，必须手动监听并计算时间差。
明确FID到底在测什么
FID（First Input Delay）衡量的是用户第一次点击、按键、触摸等可绑定事件的行为，到浏览器主线程真正开始执行对应回调之间的时间差。它反映的是主线程是否被长任务阻塞——值越小，说明页面越“跟手”，用户感知越灵敏。
- 只认这四类事件：click、keydown、mousedown、touchstart
- 不包含滚动、缩放、hover 或没绑定事件的空点击
- 页面处于后台（
document.hidden === true）时触发的不算
手动捕获FID的核心操作
不能靠浏览器自动上报，得自己尽早监听、即时计算、及时收手：
- 在
或DOMContentLoaded后立刻绑定事件监听器 - 对每个匹配事件，用
event.timeStamp（高精度、相对 navigationStart）减去performance.now()的当前值，得到近似排队延迟 - 只取第一个有效事件，捕获后立即移除所有监听，避免重复或干扰
- 建议加一层判断：若差值 500ms，可丢弃（防异常时钟或误触）
用现成库快速落地（推荐初试者）
npm 安装 first-input-delay 后，在 HTML 中引入压缩版脚本，并注册回调即可：
立即学习“前端免费学习笔记（深入）”；
<script src="first-input-delay.min.js"></script>
<script>
perfMetrics.onFirstInputDelay((delay, evt) => {
console.log('FID:', delay, 'ms', '事件类型:', evt.type);
// 可上报到监控平台，如发送给 Sentry 或自建埋点
});
</script>
这个库已内置事件过滤、后台校验、单次上报等逻辑，省去手动实现的边界风险。
结合真实场景看FID价值
FID 不是实验室数字，它和用户是否“觉得卡”高度一致。比如：
- 用户点击登录按钮，200ms 内有视觉反馈 → FID ≈ 80ms，体验顺滑
- 点击后 1.2s 才弹出加载态 → FID 很可能超 400ms，主线程正被大 JS 包阻塞
- 优化方向很明确：拆分长任务、延迟非关键 JS、用 Web Worker 处理繁重计算
