本文介绍一种高性能、低延迟的鼠标跟随方案：通过隐藏原生光标并用 css `translate` 驱动容器位移，使多个“假光标”与鼠标完全同步，彻底规避 `offsetleft/offsettop` 累积计算导致的视觉滞后问题。
在开发鼠标互动类小游戏（如“躲避点击”或“迷惑光标”）时，一个常见痛点是：用 mousemove 事件监听位移并逐帧更新 DOM 元素 left/top 样式，会导致假光标明显滞后于真实鼠标——尤其在快速移动或高刷新率显示器上，这种延迟肉眼可辨，严重削弱游戏沉浸感与公平性。
根本原因在于：
- offsetLeft/offsetTop 是布局触发属性，频繁读写会强制浏览器同步重排（reflow），造成性能瓶颈；
- 每次计算都基于上一帧位置做累加，浮点误差与渲染管线延迟会逐帧放大；
- 多个 <img> 元素独立更新，无法保证渲染引擎统一调度，加剧不同步。
✅ 正确解法是 “去中心化位移” + “CSS 合成层加速”：
✅ 核心策略
- 隐藏原生光标：全局设置 cursor: none，消除视觉干扰；
- 单容器驱动：所有假光标置于同一个 #pointers 容器内，使用 position: absolute 随机分布；
- 坐标归一化 + translate 驱动：将鼠标 clientX/clientY 映射为相对于视口的归一化偏移（-0.5 ~ +0.5），直接作用于容器的 style.translate —— 此操作由 GPU 加速，零重排、亚毫秒级响应；
- 主光标即背景：#pointers 的 background-image 作为“主光标”，精准居中（配合 calc(50% + offsetX) 微调），其余子 .pointer 为干扰项。
✅ 关键代码实现
const elPointers = document.querySelector("#pointers");
const elBody = document.body;
const movePointers = (evt) => {
// 归一化：0~1 → -0.5~+0.5（使 translate(0,0) 对应屏幕中心）
const xCenter = evt.clientX / elBody.offsetWidth - 0.5;
const yCenter = evt.clientY / elBody.offsetHeight - 0.5;
// GPU 加速位移，无重排
elPointers.style.translate = `${xCenter * 100}% ${yCenter * 100}%`;
};
elBody.addEventListener("pointermove", movePointers); // 推荐 pointermove（兼容触控）/* 关键样式 */
#pointers {
position: absolute;
width: 100%;
height: 100%;
/* 主光标：居中背景图（微调补偿光标热点） */
background: url("cursor.png") calc(50% + 2px) calc(50% + 14px) no-repeat;
pointer-events: none; /* 确保底层按钮可点击 */
}
.pointer {
position: absolute;
width: 25px;
height: 32px;
background: url("cursor.png");
/* 随机初始位置（百分比） */
}⚠️ 注意事项
- 避免 left/top + translate 混用：若需动态添加新光标，务必只用 position: absolute + % 定位，禁止混用像素值，否则 translate 会叠加错位；
- pointermove 优于 mousemove：前者更标准、支持触控，并在部分浏览器中触发更及时；
- 禁用 pointer-events：确保 #pointers 不拦截点击事件，让目标按钮（如 #btn）正常响应；
- 性能兜底：若需支持旧浏览器（< Chrome 63），可用 transform: translate(...) 替代 translate 简写。
✅ 效果对比总结
| 方案 | 延迟表现 | 性能开销 | 同步精度 | 兼容性 |
|---|---|---|---|---|
| offsetLeft + left（原始） | 明显滞后（≈2–3帧） | 高（重排+重绘） | 差（累积误差） | 全兼容 |
| translate 容器驱动（推荐） | 视觉零延迟 | 极低（GPU合成） | 完美（单源坐标） | Chrome 63+ / Firefox 60+ / Safari 13.1+ |
此方案已在 Where is My Mouse? 实际验证：无论鼠标如何急停、折返或高速划圈，所有光标均如影随形，真正实现“所见即所得”的交互体验。
