Shopify INP 超了但不知道是哪个按钮慢

现象#

CrUX 的 INP 280ms 已超 200ms 阈值，Lighthouse 只报长任务，看不出是加入购物车还是变体切换拖的。

原因#

• INP 取整页交互的最差近似值，单次审计很难复现真实用户点的是哪个元素
• 事件处理里同步读布局再写样式，强制同步布局把 16ms 预算撑到 200ms
• 变体切换触发图片重载与区块重渲染，渲染阶段也计入交互延迟
• 第三方脚本注册了全局点击监听，与业务处理抢同一个主线程时间片

处理步骤#

1. 监听 event 类型并设 durationThreshold: 40，记录 entry.target
2. 在 Performance 面板录制 Interaction to Next Paint 轨道，对照时间戳找具体交互
3. 把变体切换的 DOM 更新包进 requestAnimationFrame，避免读写交替
4. 加购改为先更新 UI 再发 fetch，不要 await 之后才改 DOM
5. 超过 50ms 的处理函数用 scheduler.postTask 或 setTimeout(0) 拆段

验收标准#

Performance 里目标交互的 INP 从 280ms 降到 160ms 以内，下一窗口 CrUX p75 低于 200ms。