FID是Web Vitals定义的核心用户体验指标，用于衡量页面加载后用户首次交互的响应延迟，需通过JavaScript监听事件并手动计算触发时刻与主线程开始处理的时间差，不能直接使用performance.getEntriesByName('first-input')的duration字段。
FID（First Input Delay）不是HTML5原生提供的API，而是Web Vitals定义的核心用户体验指标，用于评估页面加载后用户首次交互（如点击、按键）的响应延迟。它不依赖HTML5标签或属性，而需通过JavaScript主动监听和计算——关键在于捕获事件触发时间与浏览器实际开始处理之间的时间差。
为什么不能直接用performance.getEntriesByName('first-input')
该API返回的duration字段是事件回调执行耗时，不是FID。FID真正反映的是主线程阻塞导致的“排队等待时间”，而原生Entry对象未暴露事件开始处理的时间点（processingStart）。因此必须手动监听+计算，否则数据完全失真。
如何在HTML中轻量集成FID捕获逻辑
把以下脚本内联在底部或顶部，确保尽早执行：
- 只监听
click、keydown、mousedown、touchstart四类标准事件 - 用
event.timeStamp获取高精度触发时刻（相对navigationStart） - 在事件回调第一行调用
performance.now()，避免JS执行干扰 - 过滤
document.hidden === true的情况，排除后台标签页误报 - 捕获首个有效事件后立即移除所有监听器，防止重复上报
典型代码片段（无依赖、gzip后＜400B）
示例逻辑：
if ('performance' in window) {
const eventTypes = ['click', 'keydown', 'mousedown', 'touchstart'];
const handleFirstInput = (e) => {
if (document.hidden) return;
const fid = performance.now() - e.timeStamp;
// 上报 fid（例如 sendBeacon 或打点日志）
console.log('FID:', fid);
eventTypes.forEach(type => document.removeEventListener(type, handleFirstInput, true));
};
eventTypes.forEach(type => document.addEventListener(type, handleFirstInput, true));
}
FID优化方向要聚焦主线程减负
FID值高说明主线程正忙于执行长任务。优化不靠HTML写法，而靠运行时策略：
- 拆分长JavaScript任务，用
setTimeout或queueMicrotask让出主线程 - 将非关键JS设为
defer或async，避免阻塞解析 - 用
requestIdleCallback在空闲时段做预处理，如缓存初始化 - 避免内联大体积脚本；压缩并减少第三方SDK数量
- 慎用同步XHR、
document.write等已废弃且阻塞主线程的操作
它测的不是页面“画出来多快”，而是用户伸手想点时，浏览器有没有空搭理你。真实、及时、可归因——这才是FID监控的价值所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
