Shopify 轮播插件太重导致移动端卡顿

现象#

首页三个轮播用了同一个大而全的滑块库，滚动时掉帧，INP 超过 500ms。

原因#

• 引入了带大量特效与依赖的滑块库
• 每个轮播实例都初始化一套监听与定时器
• 在滚动事件里同步读取布局属性，触发强制重排

处理步骤#

1. 改用 CSS scroll-snap 实现轻量轮播，只保留左右按钮的 JS
2. 必须用库时选择体积小于 10KB 的方案，并只初始化视口内的实例
3. 滚动监听改为 passive: true，读写分离，使用 requestAnimationFrame 节流
4. 离屏轮播暂停自动播放与动画

验收标准#

INP 降到 200ms 内，滚动帧率稳定 60fps，轮播交互与自动播放正常。