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

概述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/inpChrome Docs：Web Vitals — https://developer.chrome.com/docs/lighthouse/performance/interaction-to-next-paint/MDN：PerformanceEventTiming — https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming