[!info] related notes

Interaction to Next Paint

简单来说，INP 衡量的是当用户与页面进行交互（比如点击按钮、敲击键盘）时，页面需要多长时间才能在屏幕上给出视觉反馈（即“下一次绘制”）。

如果你遇到过点击了一个加入购物车按钮，网页却卡住了半秒钟才弹出提示框的情况，这就是典型的 INP 表现糟糕。

以下是对 INP 的详细拆解：

1. 为什么 INP 这么重要？（以及它为什么取代 FID）

• 衡量整个生命周期的体验： 以前的 FID 只测量用户打开页面后的第一次交互，而且只测量浏览器“开始处理”之前的等待时间。INP 则会监控用户在页面停留期间的所有点击、敲击和按键操作，并记录下最长的那次延迟（会忽略极少数异常值），因此它能更真实地反映页面的整体卡顿感。
• 涵盖完整的交互耗时： INP 不仅仅计算等待时间，它包含了整个闭环：输入延迟（等待主线程空闲） + 处理时间（执行你的 JavaScript 事件代码） + 呈现延迟（浏览器重新计算样式并把画面画到屏幕上）。
• SEO 与用户留存： 响应迟钝的页面会导致“愤怒点击 (Rage Clicks)”和高跳出率。作为 Core Web Vitals 的一员，优秀的 INP 分数对搜索引擎排名至关重要。

2. INP 的评分标准是什么？

为了提供良好的用户体验，网站应努力将 INP 控制在 200 毫秒 以内：

• 🟢 良好 (Good)： <= 200 毫秒
• 🟡 需要改进 (Needs Improvement)： 200 毫秒 - 500 毫秒
• 🔴 较差 (Poor)： > 500 毫秒

(注：INP 只关注点击、触摸和键盘输入，不包含鼠标悬停 (Hover) 或页面滚动 (Scroll)。)

3. 导致 INP 过高的常见原因及优化策略

INP 过高通常意味着浏览器的“主线程 (Main Thread)”太忙了。浏览器的主线程既要负责执行 JavaScript，又要负责计算样式和绘制页面。如果 JS 霸占了主线程太久，浏览器就无法及时绘制用户交互的反馈。

A. 长任务 (Long Tasks) 阻塞主线程

如果你的某个 JavaScript 函数执行时间超过 50 毫秒，它就是一个“长任务”。当用户恰好在这个长任务执行期间点击了按钮，浏览器只能等任务跑完才能处理点击事件。

• 优化方向： * 分解长任务： 不要把所有逻辑塞在一个巨大的函数里。可以使用 setTimeout、requestAnimationFrame 或者更现代的 scheduler.yield() API，将大任务拆分成小块，主动把控制权“让 (yield)”给主线程，让它有机会去响应用户的点击并更新 UI。

B. JavaScript 事件处理程序执行过慢

如果用户点击按钮后，你绑定的 onClick 事件里包含了极其复杂的计算、庞大的数据处理或同步的 API 请求，就会拉长“处理时间”。

• 优化方向：
  • 保持事件回调函数的轻量化。
  • 将复杂的非 UI 计算剥离出去，例如使用 Web Workers 在后台线程处理数据，避免阻塞主线程。
  • 尽早提供视觉反馈：即使背后还在请求数据，也要先立刻给按钮加上一个“Loading”状态（这属于下一次绘制），让 INP 的计时先停下来。

C. 复杂的 DOM 操作和渲染负担

有时候 JS 执行得很快，但你让浏览器去修改了成千上万个 DOM 节点，或者触发了复杂的 CSS 动画，导致浏览器在“呈现延迟 (Presentation Delay)”阶段花费大量时间去重新计算布局 (Layout) 和绘制 (Paint)。

• 优化方向：
  • 减少 DOM 树的深度和节点总数。
  • 避免“强制同步布局 (Forced Synchronous Layout)”：即在 JS 中先修改元素的样式，紧接着又去读取它的尺寸（如 offsetHeight），这会逼迫浏览器立刻进行昂贵的布局计算。
  • 使用 CSS transform 和 opacity 来实现动画，因为它们可以交给 GPU 加速，不会阻塞主线程。

D. 沉重的第三方脚本

广告、数据分析、客服插件等第三方脚本经常会在后台默默执行大量的长任务，随时可能“背刺”用户的交互体验。

• 优化方向： * 延迟加载非核心的第三方脚本（使用 defer 或 async）。
  • 评估并移除不必要的第三方插件。

4. 如何测量 INP？

• 实验室工具： * Chrome 开发者工具的 Performance 面板。你可以录制一段交互过程，查看主线程火焰图 (Flame Chart)，找出红色的“长任务”方块。
  • Lighthouse (Timespan 模式)。
• 真实用户监控： PageSpeed Insights、Chrome 用户体验报告 (CrUX) 以及使用 web-vitals JavaScript 库在你的项目中收集真实用户的点击延迟。

Related notes

• AI MOC