CrUX 里 INP 是 620 毫秒 已经落到差的一档 点筛选按钮时按下样式立刻出来 列表却要等半秒才刷新 这半秒页面点不动。第一次遇到会往复杂处想，其实漏掉的多是个小前提。
# Performance 面板勾选 Web Vitals 后录一次点击 npx lighthouse example.com --only-categories=performance
按钮反馈走 CSS 很快 真正堵住的是点击回调里同步算完再一次性渲染上千行列表 主线程被占满 下一次输入只能排队等它结束。这一点先确认清楚，后面就不用反复试。
「INP 响应延迟」这类改动最怕改一半，回滚脚本先准备好，再动生产。把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。
改动写完就同步给同事，下一个人踩同一个坑，成本还是你的。
具体做法是，在 Performance 里录一次真实点击 找到 Interaction to Next Paint 那一条看回调耗时有多长；列表改成虚拟滚动 只渲染可视区十几行 不要一次把上千条铺进 DOM；接口请求挪出点击处理函数 先出骨架屏再把数据填进去 让绘制早点发生。
改完照着核一遍，点击后下一次绘制在 200 毫秒内出现 连续点五次都不再出现明显停顿。