Event Timing API：输入事件时序与阻塞分析

---

title: Event Timing API：输入事件时序与阻塞分析

keywords:

• Event Timing API
• PerformanceEventTiming
• 输入延迟
• 处理时序
• 阻塞分析

description: 使用 Event Timing API 采集输入事件的处理时序与延迟，定位阻塞来源并与 INP 联动优化交互响应。

categories:

• 文章资讯
• 行业动态

---

概述

Event Timing 提供输入事件（点击、键盘等）的时序信息，包括接收、开始处理与持续时间。可用于与 INP 联动进行优化与定位阻塞。

用法/示例

new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    console.log(e.name, e.processingStart - e.startTime, e.duration)
  }
}).observe({ type: 'event', buffered: true })

工程建议

• 对高延迟事件拆分处理并优先关键更新；避免同步测量与布局造成阻塞。
• 将异常事件记录入日志与告警，结合 Long Tasks 与调度策略综合优化。
• 在滚动与输入密集场景进行专项评估与降级。

参考与验证

• MDN：PerformanceEventTiming — https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming
• web.dev：Event Timing — https://web.dev/articles/event-timing