如何通过HTML的Event Timing API测量用户交互从触发到响应的延迟-html教程-PHP中文网

event timing api是唯一能准确获取fid的原生机制，因其提供starttime与processingstart字段，差值即为标准fid；而performance.getentriesbyname('first-input')仅返回事件处理耗时（duration），不包含主线程排队延迟，故无法替代。

如何通过html的event timing api测量用户交互从触发到响应的延迟

Event Timing API 是目前唯一能直接、可靠获取用户首次交互延迟（FID）的原生机制，performance.getEntriesByName('first-input') 返回的 duration 不是 FID，它只反映事件处理耗时，不包含主线程排队等待时间。

为什么不能用 `performance.getEntriesByName('first-input')` 取 FID

这个 API 的返回值是 FirstInputEntry，其 duration 字段等于事件回调执行完成时刻减去开始执行时刻，即纯 JS 处理耗时。但 FID 定义为「用户触发事件」到「浏览器开始执行该事件回调」之间的时间差——中间那段被阻塞、排队的时间才是关键。这个起始点（processingStart）在 Entry 对象中并未暴露，所以必须靠 Event Timing API 或手动监听补全。

常见错误现象：duration 常为 0 或极小值（如 0.2ms），让人误以为交互响应很快，实则主线程可能已卡住 200ms 才轮到调度该事件。

只有 Chrome 69+、Edge 79+、Firefox 105+ 支持 first-input 类型的 PerformanceEntry
即使支持，也仅对页面生命周期内首个 click/keydown/mousedown/touchstart 生效
若页面加载后未触发这四类事件，getEntriesByName('first-input') 返回空数组

用 `performance.getEntriesByType('event')` 捕获真实 FID

Event Timing API（event 类型 entry）才是 W3C 正式推荐方式，它在事件调度前就记录了 startTime（用户触发时间）和 processingStart（浏览器真正开始处理的时间），二者之差就是标准 FID。

使用前提：需在页面早期（如中）启用 event 类型的 PerformanceObserver，否则会错过首个事件。

必须设置 buffered: true，否则页面加载完成前发生的事件不会被缓存上报
只监听 event 类型，不要混用 first-input；后者是旧兼容层，语义模糊
entry.name 是事件类型字符串（如 "click"），entry.duration 仍是处理耗时，别再误用
FID 值 = entry.processingStart - entry.startTime，该值可能为 0（无阻塞），也可能达数百毫秒

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'click' || entry.name === 'keydown') {
      const fid = entry.processingStart - entry.startTime;
      if (fid > 0) {
        console.log('FID:', fid);
        observer.disconnect(); // 仅上报首个
      }
    }
  }
});
observer.observe({ type: 'event', buffered: true });