通过隐藏原生光标并用 css `translate` 驱动容器位移，可彻底消除 mousemove 事件带来的累积延迟，让假光标与鼠标指针完全同步。
在网页交互游戏中，实现“假光标”精准跟随真实鼠标是一个常见但易被忽视性能细节的需求。你可能已经尝试过监听 mousemove 事件、记录坐标差值并逐个更新元素 left/top 样式——但这种方法天然存在视觉延迟：每次事件触发需经历事件调度、JS 执行、样式计算、布局重排、绘制合成等多个阶段，尤其在快速移动或高刷新率屏幕上，假光标会明显滞后甚至“拖影”。
根本原因在于：offsetLeft/offsetTop 是读取布局信息的强制同步操作（Layout Thrashing），频繁读写会导致浏览器反复回流；而逐个更新多个 DOM 元素的 style.left/top 更加剧了渲染压力。
✅ 正确解法是「以静制动 + 硬件加速」：
- 隐藏原生光标：全局设置 cursor: none，消除视觉干扰；
- 统一驱动容器：将所有假光标放入一个绝对定位的父容器（如 #pointers），仅对该容器应用 transform: translate()；
- 使用 pointermove 替代 mousemove：更高效、兼容性更好，且支持触控设备；
- 基于视口比例计算偏移量，避免像素级精度丢失和边界跳变。
以下是核心实现逻辑（已优化为高性能方案）：
// 获取元素的简洁封装
const el = (sel) => document.querySelector(sel);
// 鼠标移动时，仅平移整个 #pointers 容器
const movePointers = (evt) => {
const { clientX, clientY, target } = evt;
const body = document.body;
const xPercent = (clientX / body.offsetWidth - 0.5) * 100;
const yPercent = (clientY / body.offsetHeight - 0.5) * 100;
el("#pointers").style.translate = `${xPercent}% ${yPercent}%`;
};
// 绑定事件（推荐 pointermove，更可靠）
document.body.addEventListener("pointermove", movePointers);对应关键 CSS（务必启用硬件加速）：
* { cursor: none; } /* 全局隐藏系统光标 */
body {
height: 100dvh;
overflow: hidden;
margin: 0;
}
#pointers {
position: absolute;
width: 100%;
height: 100%;
/* 主光标作为背景图居中显示（自动跟随 translate） */
background: url("cursor.png") 50% 50% no-repeat;
background-size: 24px 24px;
pointer-events: none; /* 确保点击穿透到底层按钮 */
/* 启用 GPU 加速 */
will-change: transform;
}? 进阶提示：
- 所有“假光标”（即 .pointer 子元素）应使用 position: absolute + 百分比随机定位（如 left: 37%; top: 62%;），它们会随父容器整体平移，无需单独 JS 控制；
- 避免在 pointermove 中执行 DOM 查询、getBoundingClientRect() 或任何布局读取操作；
- 若需更高精度（如亚像素对齐），可结合 requestAnimationFrame 做一次节流平滑，但本例中直接绑定 pointermove 已足够流畅；
- 注意：translate 的单位必须是 % 或 px，百分比值基于容器自身尺寸，因此 50% 恒表示中心点，完美匹配光标锚点。
最终效果：无论鼠标如何疾速划过屏幕，所有假光标均如影随形、毫秒级响应——这才是真正意义上的「实时无延迟跟随」。
