揭开INP的神秘面纱：新工具与可行的见解
内容提要
本文探讨了优化Vercel网站的“交互到下次绘制”（INP）指标，强调减少主线程阻塞时间以提升用户体验。建议通过减少第三方JavaScript、优化事件处理和浏览器渲染时间来改善INP。此外，使用“await-interaction-response”模块可以将用户反馈与耗时操作分开，从而进一步提升用户体验。
延伸解读
INP 的常见误解
文章指出，INP 常被误解为必须在 200 毫秒内完成所有工作并绘制完整响应。实际上，INP 只要求浏览器在 200 毫秒内有机会绘制并反馈用户输入，并不要求所有耗时操作都在此期限内完成。例如，在事件处理中先 await 一个异步操作（如 fetch），即使后续阻塞主线程一秒，INP 仍可能良好。理解这一点是优化 INP 的关键。
优化 INP 的三个阶段
INP 从交互到下次绘制可分为三个阶段：其他代码、事件处理、浏览器渲染。优化需最小化每个阶段的耗时。其他代码阶段常由第三方 JavaScript 引起，可联系供应商修复；事件处理阶段可通过 React 的 memo 化、不可变上下文和属性值来缩短；浏览器渲染阶段则需减少 DOM 无效化，使用 CSS containment、虚拟列表等技术。
拆分交互响应的实用方案
对于无法在 200 毫秒内完成的昂贵操作，文章建议将交互响应拆分为两个阶段：先立即确认用户操作，再执行耗时任务。为此推出了 await-interaction-response 模块，它通过 requestAnimationFrame 和 setTimeout 让浏览器先绘制一帧，再执行后续代码。现代 React 中也可使用 startTransition 达到类似效果。这能确保用户及时获得反馈，提升感知性能。
定位 INP 问题的工具
文章提到，在开发机上难以复现 INP 问题。Vercel Speed Insights 可识别影响 INP 的具体 HTML 元素，并给出 CSS 选择器；Vercel Toolbar 支持在本地开发、预览或生产环境中直接监控 INP。结合 Chrome DevTools 的 CPU 节流，可以模拟慢速设备。注意：首次交互可能因节流出现极端延迟，可忽略并再次点击。
Q&A
什么是INP指标，它的重要性是什么？
INP（交互到下次绘制）是Google核心网页指标之一，反映用户体验，影响搜索排名。
如何优化INP以提升用户体验？
优化INP的关键在于减少主线程阻塞时间，建议减少第三方JavaScript、优化事件处理和浏览器渲染时间。
第三方JavaScript如何影响INP？
第三方JavaScript常常导致INP下降，建议联系相关供应商进行优化以改善用户体验。
如何使用'await-interaction-response'模块来改善INP？
'await-interaction-response'模块可以将用户反馈与耗时操作分开，从而提升用户体验，确保用户操作得到及时反馈。
在优化INP时，事件处理阶段的优化有哪些建议？
可以使用React的memo化和不可变的上下文与属性值来优化事件处理阶段，减少重新渲染的时间。
Vercel Speed Insights工具如何帮助优化INP？
Vercel Speed Insights可以识别影响INP的具体HTML元素，帮助开发者针对性地进行优化。
