INP是浏览器自动计算的Web性能指标，需通过PerformanceObserver监听event类型条目获取duration值，取所有交互中最大值；无法用addEventListener直接测量，因缺乏paint时间戳钩子。
INP（Interaction to Next Paint）不是靠 HTML 标签或属性直接“做监控”的东西，它是一个 Web 性能指标，由浏览器在用户真实交互后自动计算，无法用 <script> 主动触发或手动埋点获取原始值。你只能通过 PerformanceObserver 或 RUM SDK 间接采集，且必须满足特定交互条件才会生成 INP 条目。
为什么不能用 addEventListener('click') 直接测 INP
INP 不是事件响应时间，而是从用户交互（如 click、tap、keydown）开始，到浏览器完成下一次渲染帧（paint）并更新 UI 的整个耗时链路，包含 JS 执行、样式计算、布局、绘制、合成等多个阶段。单纯监听 click 只能拿到起点，拿不到“next paint”那个终点——浏览器不对外暴露这个 paint 时间戳的直接钩子。
- PerformanceObserver 是唯一标准途径，监听
'event'类型 entry，过滤出name为'click'、'keydown'、'pointerdown'等的EventTiming条目 - 每个 entry 的
duration字段才是 INP 候选值（注意：不是所有 click 都有 duration，只有触发了 layout/paint 的才算） - 页面生命周期内所有符合条件的交互会生成多个 entry，INP 最终取其中最大值（不是平均值，也不是首屏值）
PerformanceObserver 监控 INP 的最小可行代码
以下代码必须放在 <head> 尽早执行，否则可能错过首屏关键交互：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
if ('PerformanceEventTiming' in window) {
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// 只关心有实际渲染影响的交互
if (entry.duration > 0 && ['click', 'keydown', 'pointerdown'].includes(entry.name)) {
console.log('INP candidate:', entry.name, entry.duration, entry.startTime);
}
}
});
po.observe({ type: 'event', buffered: true });
}
- 必须检查
'PerformanceEventTiming' in window，Safari 16.4+ 和 Chrome 110+ 才支持，旧版返回空 -
buffered: true很关键：确保能捕获页面加载前发生的交互（比如用户快速点击了还没 JS 加载完的按钮） - 不要只看
entry.duration—— 它可能被截断（maxDuration 限制），需结合entry.processingStart和entry.duration判断是否完整
常见误判：把 FID 或 TBT 当成 INP
FID（First Input Delay）已废弃，TBT（Total Blocking Time）是 LCP 前的长任务总和，二者和 INP 完全无关。INP 关注的是“单次最差交互体验”，不是首次、也不是累计。
立即学习“前端免费学习笔记（深入）”；
- 如果只上报
performance.getEntriesByType('event')但没过滤duration > 0，会拿到大量无渲染影响的 entry（比如纯 JS 事件），它们的duration是 0，不能计入 INP - 如果用
requestIdleCallback模拟“等待 paint”，得到的时间跟 INP 定义不符，属于错误替代方案 - RUM 工具（如 Sentry、Cloudflare Web Analytics）底层也是基于 PerformanceObserver，但做了聚合逻辑，直接读原始 entry 更可靠
INP 的复杂性在于它依赖真实用户操作路径，且受主线程阻塞、CSS 复杂度、GPU 合成策略等多层影响。想稳定优化，得先确认采集到的 entry 确实代表用户感知卡顿——比如 entry.duration > 200 且发生在用户可见区域内的可点击元素上，否则只是噪音。
