"INP 深入解析：Interaction to Next Paint 的事件阶段与优化"

概述INP 衡量页面在整个访问周期中对交互的总体响应性，报告最慢的一次合格互动的总时长（从交互开始直到下一帧绘制）。相较 FID，INP 更全面；优化需关注三个阶段与主线程竞争。三个阶段输入延迟：从用户触发到事件回调开始执行。受脚本解析/编译、网络事件、计时器、其他并发互动及 iframe 主线程竞争影响［参考1,2］。处理时长：事件回调的执行耗时，包括同步逻辑、DOM 操作与布局测量等［参考1］。呈现延迟：事件处理完成后到下一帧绘制。受大量客户端渲染与长时间 HTML 生成影响（SPA/客户端渲染）［参考1］。定位与采集使用 RUM 提供的互动上下文（交互类型、发生时机、责任元素）；或用 PageSpeed Insights 的 CrUX 弥补现场数据［参考2］。识别互动发生在哪个 Browsing Context（顶层或 iframe），对应主线程进行分析［参考2］。优化策略降低输入延迟：减少首屏同步脚本与解析；拆分与延迟非关键 JS；避免过多并发事件；合理使用 `scheduler.postTask` 与让路机制。缩短处理时长：将重计算与大 JSON 解析分片；避免同步布局读写（测量后再写入，或使用 `requestAnimationFrame`）；精简事件处理。缩短呈现延迟：降低客户端大块 HTML 渲染；采用 SSR/流式渲染与增量更新；减少阻塞样式与脚本。参考与验证［参考1］web.dev 中文：优化 INP（三个阶段与 SPA 客户端渲染影响）：https://web.developers.google.cn/articles/optimize-inp?hl=zh-cn［参考2］web.dev 英文：INP 现场数据与主线程/iframe 注意事项与 CrUX：https://web.dev/articles/optimize-inp［参考3］web.dev 博文：INP 取代 FID 的背景与度量范围：https://web.dev/blog/inp-cwv关键词校验关键词与 INP 事件阶段与优化一致。