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 采集事件条目 ```js 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（如可用） ```js 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