交互卡顿怎么讲

一句话先定性

交互卡顿我一般不会讲成“页面有点慢”，而会讲成“用户操作后，主线程有没有及时给出反馈”。

30 秒版本

如果面试官问交互卡顿，我一般会先讲 INP。这个指标比以前的 FID 更接近真实交互体验。INP 差，通常说明主线程被长任务堵住了，比如一次输入触发了太重的计算，或者一次状态更新带出了太多组件重渲染。优化动作一般就是拆长任务、减少不必要渲染、收缩状态边界、必要时上 useTransition、useDeferredValue 或 Web Worker。

小抄

• 优先指标：INP
• 先查什么：主线程长任务、重复渲染、同步计算、Effect 里重逻辑
• 常见动作：拆长任务、延后非关键逻辑、减少重渲染、缩小状态边界、虚拟列表、必要时 Web Worker
• 面试要点：不要只说“优化渲染”，要明确是主线程压力问题还是组件边界问题

高频追问

为什么现在更讲 INP 而不是 FID

因为 FID 只看第一次输入延迟，覆盖太窄。INP 更关注一次完整交互从输入到页面反馈的体验，所以更贴近真实场景。

遇到输入框卡顿你第一反应看什么

我会先看这次输入之后有没有很重的同步计算，或者是不是某个状态更新把大面积组件都带着重渲染了。也就是说，先看主线程和状态边界。

最后一句收尾

所以交互卡顿的核心不是某个按钮点不动，而是用户动作之后主线程有没有被及时释放出来，这也是我排查 INP 问题时最先看的地方。