Interaction to Next Paint（INP）：交互响应指标与优化

---

title: Interaction to Next Paint（INP）：交互响应指标与优化

keywords:

• INP
• PerformanceEventTiming
• 交互延迟
• web-vitals
• 优化策略

description: 采集并优化 INP（交互到下一次绘制），通过 PerformanceObserver 或 web-vitals 库监测交互延迟，结合长任务拆分与优先级调度降低响应时间。

categories:

• 文章资讯
• 技术教程

---

概述

INP 衡量用户交互（点击、输入等）到下一次绘制完成的总体延迟。建议阈值：<200ms 良好，200–500ms 待提升，>500ms 较差。优化方向包括减少主线程长任务、优先关键更新与异步分片。

用法/示例

使用 PerformanceObserver 采集事件条目

const interactions = new Map()
const po = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    const id = entry.interactionId || entry.identifier || 0
    const prev = interactions.get(id) || 0
    interactions.set(id, Math.max(prev, entry.duration))
  }
})
po.observe({ type: 'event', buffered: true })

function getINP() {
  let max = 0
  for (const v of interactions.values()) max = Math.max(max, v)
  return max
}

使用 web-vitals（如可用）

import { onINP } from 'web-vitals'
onINP(({ value }) => console.log('INP', value))

工程建议

• 拆分长任务：将非关键计算延后或分片，避免阻塞输入响应。
• 优先关键更新：与 requestAnimationFrame、scheduler.postTask 协作确保帧内完成。
• 减少布局抖动与重绘：使用合成属性（transform/opacity），避免大范围同步测量。

参考与验证

• web.dev：INP — https://web.dev/articles/inp
• Chrome Docs：Web Vitals — https://developer.chrome.com/docs/lighthouse/performance/interaction-to-next-paint/
• MDN：PerformanceEventTiming — https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming