最稳妥方案是requestAnimationFrame配合mousemove事件，即在动画循环中读取缓存的鼠标坐标进行渲染，而非在mousemove回调中直接绘制。
直接用 requestAnimationFrame 配合 mousemove 事件最稳妥
HTML5 动画绑定鼠标移动，核心不是“给动画加事件”，而是让动画循环（requestAnimationFrame）持续读取鼠标坐标。硬绑 onmousemove 到某个元素再触发重绘，容易卡顿、丢帧、坐标不准——尤其鼠标快速移动时。
关键逻辑是：在每一帧中，用最新缓存的 clientX/clientY 更新动画对象位置，而不是在 mousemove 回调里直接操作 DOM 或 Canvas。
- 监听
document.addEventListener('mousemove', ...)，只存坐标到全局变量或闭包内，不做绘制 - 在
requestAnimationFrame回调里读取该坐标，计算偏移、缩放、旋转等动画逻辑 - 避免在
mousemove里调用ctx.clearRect()或element.style.transform - 加
throttle不是必须，但若需兼容低端设备，可用setTimeout+ 标志位简单节流（非防抖）
canvas 中实现平滑鼠标追踪的最小可行代码
Canvas 是最常见需求场景。下面这段代码能跑通、不掉帧、坐标实时响应：
let mouseX = 0, mouseY = 0;
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animate() {
// 清空画布（仅当前帧）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制一个跟随鼠标的圆（带轻微惯性）
const targetX = mouseX - canvas.getBoundingClientRect().left;
const targetY = mouseY - canvas.getBoundingClientRect().top;
// 简单插值模拟惯性（可替换为 easing 函数）
const x = (x || targetX) 0.9 + targetX 0.1;
const y = (y || targetY) 0.9 + targetY 0.1;
ctx.beginPath();
ctx.arc(x, y, 12, 0, Math.PI * 2);
ctx.fillStyle = '#4a6fa5';
ctx.fill();
requestAnimationFrame(animate);
}
animate();
用 CSS transform 追踪时为什么常出现延迟？
纯 CSS 方案（比如给 div 加 transition: transform 0.1s）看似简单，但实际会因浏览器渲染管线调度导致明显滞后，尤其在高 DPI 屏或 macOS 上更明显。根本原因是：CSS transition 依赖样式计算 → 布局 → 绘制 → 合成四步，而 mousemove 触发的是样式层更新，中间存在至少一帧延迟。
立即学习“前端免费学习笔记（深入）”；
- 不要对
top/left做 transition，会触发 layout，更卡 - 即使用了
transform，也建议关掉will-change: transform—— 它可能让合成器提前分配资源，反而干扰 mousemove 的及时响应 - 如果坚持用 CSS，必须配合
requestAnimationFrame手动 setStyle，绕过 transition，例如：el.style.transform = `translate(${x}px, ${y}px)` - 注意：
getBoundingClientRect()返回值是相对于视口的，而canvas坐标需减去 offset；DOM 元素则通常用pageX/pageY更稳
移动端 touchmove 怎么和 mousemove 兼容？
PC 和手机共用一套追踪逻辑时，不能只监听 mousemove。iOS Safari 对 mousemove 支持弱（尤其页面滚动后），必须同时处理 touchmove 并阻止默认行为。
- 监听
touchmove时，记得加e.preventDefault()，否则部分安卓机无法持续触发 - 从
e.touches[0]取坐标，而非changedTouches（后者只含本次变化的触点） - 推荐统一入口函数：
updatePointer(x, y)，然后在mousemove和touchmove里都调它 - 别忽略
touchstart后立即触发一次updatePointer，避免首次触摸无响应 - 桌面端可检测
'ontouchstart' in window来决定是否加 touch 监听，避免误伤鼠标设备
真正难的不是写几行监听代码，而是理解「鼠标坐标只是输入信号，动画节奏必须由 RAF 主导」。很多人卡在“鼠标一动就立刻 redraw”，结果越优化越卡。
