"Event Timing API：输入事件延迟采集与 INP 关联"

---

title: "Event Timing API：输入事件延迟采集与 INP 关联"

keywords:

• Event Timing
• PerformanceEventTiming
• first-input
• processingStart
• duration

description: "说明 Event Timing 的事件条目与时序字段，用于采集首次输入与后续交互的延迟，辅助评估 INP 并定位阻塞来源，提供示例与参考。"

categories:

• 应用软件
• 编程开发

---

概述

Event Timing 暴露输入事件的时序（如 first-input 与一般 event），包含处理开始时间与持续时间字段，有助于评估交互延迟与关联 INP 指标。

示例

const obs = new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    // e.name: 'first-input' 或 'event'
    // e.processingStart, e.duration
  }
})
obs.observe({ type: 'event', buffered: true })

工程建议

• 采集策略：在首屏与关键交互阶段启用；与 Long Tasks/资源加载日志联动定位问题。
• 优化路径：减少主线程阻塞，拆分任务与并行化，结合调度优先级。
• 兼容：特性检测与降级；在不支持平台使用用户事件埋点估算。

参考与验证

• MDN PerformanceEventTiming 文档：https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming
• web.dev INP 与 Event Timing 指南：https://web.dev/articles/inp
• Chrome 性能监测说明：https://developer.chrome.com/docs/crux/methodology/inp/