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