Shopify INP 差因主线程长任务

现象#

点击加购、切换变体后要等一两秒才有反应，INP 超过 500 毫秒，但页面加载分数看起来正常。

原因#

• 变体切换时同步重排整个商品区，一次性写入大量 DOM
• 第三方应用脚本在点击事件里做同步计算或网络请求
• 图片轮播库在初始化时遍历所有图片并绑定事件
• 事件处理函数里调用了 localStorage 与 JSON.parse 处理大对象

处理步骤#

1. 用 Chrome 性能面板录制一次点击，找超过 50ms 的长任务与对应的调用栈
2. 把变体切换的 DOM 更新拆成「先更新价格与图，再异步更新库存与推荐」两步
3. 对非关键逻辑用 requestIdleCallback 或 setTimeout(..., 0) 让出主线程
4. 检查应用脚本是否在点击回调里同步请求，改为先给即时反馈再异步提交
5. 用 PerformanceObserver 监听 event 类型的 durationThreshold: 100，上线后持续观察

验收标准#

主要交互的 INP 降到 200 毫秒以内；性能面板中点击后的长任务被拆成多个小于 50ms 的片段。