节流是拖拽中避免掉帧的必要手段，需对 mousemove/touchmove 中的坐标计算、碰撞检测、边界校验、数据更新等耗性能操作进行 16ms 或 24ms 节流，并配合 requestanimationframe 确保与渲染帧同步，移动端还需设置 passive: false 并及时调用 preventdefault。
拖拽过程中频繁更新位置会大量触发 mousemove 或 touchmove，直接同步操作 DOM 极易引发重排重绘和掉帧。节流不是可选项，而是必须项——它把原本每毫秒都可能执行的计算，压缩到可控帧率下稳定运行。
拖拽中哪些计算需要节流
真正耗性能的不是“移动”本身，而是每次移动都做的判断和更新：
- 实时计算元素新坐标并设置
style.left/top或transform - 反复调用
getBoundingClientRect()做碰撞检测（如列表排序占位符） - 持续校验边界（是否超出视口、父容器限制区域）
- 同步更新数据模型（如拖拽排序时动态修改数组顺序）
节流要加在 mousemove/touchmove 的回调里
不能节流鼠标按下或松开事件，而必须包裹位置更新逻辑。推荐使用时间戳方式节流（响应更及时），延迟设为 16ms（≈60fps）或 24ms（兼顾性能与顺滑）：
function throttle(func, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= delay) {
func.apply(this, args);
last = now;
}
};
}
<p>const throttledMove = throttle((x, y) => {
draggable.style.transform = <code>translate(${x}px, ${y}px)</code>;
}, 16);</p><p>document.addEventListener('mousemove', e => {
if (!isDragging) return;
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
throttledMove(x, y);
});
</p>
配合 requestAnimationFrame 更精准
单纯用 setTimeout 或时间戳节流仍可能和浏览器渲染帧不同步。更优做法是：节流只负责“采样频率”，真正更新交由 requestAnimationFrame 执行：
- 在
mousemove中只记录最新坐标，不操作 DOM - 用
raf驱动单次更新，确保与屏幕刷新节奏一致 - 节流可叠加在采样环节，避免
raf被高频触发挤占主线程
移动端注意 touchmove 的 passive 问题
给 touchmove 绑定节流函数时，必须显式设置 { passive: false }，否则 e.preventDefault() 无效，页面会意外滚动干扰拖拽：
document.addEventListener('touchmove', handleTouchMove, { passive: false });
节流函数内部若需阻止默认行为（比如禁用文字选中），也要确保在事件捕获阶段就调用 preventDefault，不能等节流后才处理——因为触摸事件对象是复用的，节流延迟可能导致拿到过期事件。
