HTML5 性能监控指标：利用 Performance API 计算首次交互时间-H5教程-PHP中文网

fid 是用户首次交互到浏览器开始处理事件的延迟，需用 performanceobserver 监听 first-input 类型条目计算，不能用 performance.now() 或 timing 推导，因依赖真实用户操作时机。

html5 性能监控指标：利用 performance api 计算首次交互时间

首次交互时间（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 等）且存在处理延迟时自动创建条目：

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 });

注意细节：