requestanimationframe节流是最优方案：touchmove仅记录坐标并触发raf，所有dom更新移至raf回调执行；配合touch-action明确手势意图、israfpending防重复调用、低端机动态降级，兼顾跟手性与低负载。
直接用 requestAnimationFrame 做节流，是当前最稳妥、兼容性最好、且真正兼顾“跟手”和“低负载”的方案。关键不在“要不要节流”，而在于“怎么节流”——不能丢帧，也不能堆计算。
只在 rAF 回调里更新状态，不在 touchmove 里改 DOM
touchmove 本身只做两件事：记录坐标差值、触发一次 rAF。所有样式变更、transform 计算、布局读取，全部挪到 rAF 回调里统一执行。这样既避免了每毫秒都触发重排重绘，又保证了每一帧最多只渲染一次。
- touchmove 中只更新
state.deltaX、state.lastX等纯数据，不调element.style.transform - rAF 回调中批量应用位移：
element.style.transform = `translateX(${state.offset}px)` - 如果涉及惯性滑动或 easing，也只在 rAF 中计算下一帧位置，不提前预估多帧
加 touch-action 明确手势意图，跳过浏览器 300ms 判定延迟
iOS 和部分安卓浏览器默认会对 touchmove 做延迟判定（比如等你是否双击、是否要滚动），这会导致首帧响应滞后。加 touch-action 能让系统立刻知道“这个区域只负责横向拖拽”，从而释放原始 touchmove 事件。
CPA Update - Secure CLI Proxy API Maintenance
下载
安全更新和维护 CLI Proxy API（CPA）部署与配置。用于 CPA 镜像升级、配置变更、认证目录兼容修复、上线验证与回滚。适用于用户提到“CPA 更新/升级/配置改了/容器重建/回滚”等场景。
- 仅水平拖拽（如轮播图）：
touch-action: pan-y（允许竖向滚动，禁用横向默认行为） - 完全自定义拖拽（如画布平移）：
touch-action: none，但必须确保已接管所有滚动逻辑 - 可点击区域嵌套时，子元素需单独设
touch-action: manipulation，保留点击穿透 - 该样式必须加在监听 touchmove 的**目标元素本身**，父容器设置无效
用锁机制防重复 rAF 调用，避免一帧内多次排队
touchmove 可能在一帧内触发十几次，但 requestAnimationFrame 不会自动去重。若每次 touchmove 都调 requestAnimationFrame(fn)，可能在一帧里排队多个回调，导致 CPU 空转。
- 维护一个布尔标记
isRafPending，true 表示已有 rAF 在队列中 - touchmove 中只在
!isRafPending时调用requestAnimationFrame，并立即置为 true - rAF 回调执行完后，再置
isRafPending = false - 不要用 throttle 时间间隔（如 16ms setTimeout），它无法对齐屏幕刷新节奏，反而易掉帧
低端机兜底：动态降级 transform 更新频率
对 CPU 明显吃紧的设备（如内存 window.devicePixelRatio 和 navigator.userAgent 粗筛，或用 performance.now() 监测上一帧耗时 > 12ms 时，临时将 transform 更新改为“隔帧执行”（即每两帧更新一次）。
- 不影响触摸采样精度（坐标仍每帧记录），只是视觉反馈略缓，但用户几乎无感
- 恢复条件：连续 3 帧渲染耗时 ≤ 10ms，自动切回逐帧更新
- 避免全局降级，只对当前正在拖拽的元素启用
