本文介绍一种通过隐藏原生光标并使用 css `translate` 驱动父容器位移的高性能方案，彻底解决传统 `mousemove` + `offsetleft/top` 更新导致的视觉延迟问题，适用于点击躲避类交互游戏。
在开发鼠标跟随类交互（如“躲猫猫”式点击游戏）时，直接监听 mousemove 并逐个更新 DOM 元素的 left/top 样式会产生明显延迟——这是因为 offsetLeft/offsetTop 触发强制同步布局（Layout Thrashing），且每次重排重绘开销大，尤其在多元素场景下愈发卡顿。
根本优化思路：避免逐元素操作，改用单次 CSS 变换驱动整体位移
核心技巧是：
- 使用 cursor: none 彻底隐藏原生鼠标指针；
- 创建一个绝对定位的容器（如 #pointers），将所有“假光标”作为子元素随机分布于其内部；
- 仅对这个容器应用 transform: translate()，利用 GPU 加速实现像素级同步响应；
- 将鼠标坐标归一化为相对视口中心的偏移比例（如 xCenter = (clientX / width) - 0.5），再映射为百分比位移，确保响应线性且跨分辨率一致。
以下是精简可复用的实现代码：
<button id="btn">I am here</button> <div id="pointers"></div>
* { margin: 0; box-sizing: border-box; cursor: none; }
body { height: 100dvh; overflow: hidden; }
#pointers {
position: absolute;
width: 100%; height: 100%;
background: url("https://i.sstatic.net/Zt6te.png") calc(50% + 2px) calc(50% + 14px) no-repeat;
pointer-events: none; /* 关键：允许底层按钮正常接收点击 */
}
.pointer {
position: absolute;
width: 25px; height: 32px;
background: url("https://i.sstatic.net/Zt6te.png");
}
#btn {
position: absolute;
border: none; border-radius: 5px;
background: #000; color: #fff;
padding: 0.5rem 0.7rem; font-size: 12px;
font-family: 'Roboto', sans-serif;
translate: -50% -50%; /* 居中锚点 */
}const el = sel => document.querySelector(sel);
const rand = (min, max) => Math.random() * (max - min) + min;
const elBody = el('body');
const elPointers = el('#pointers');
const elBtn = el('#btn');
// 初始化按钮位置
const moveBtn = () => {
elBtn.style.left = `${rand(5, 95)}%`;
elBtn.style.top = `${rand(5, 95)}%`;
};
// 动态生成假光标（随机数量+随机位置）
const createPointers = () => {
const count = Math.floor(rand(3, 10));
elPointers.innerHTML = '';
for (let i = 0; i < count; i++) {
const ptr = document.createElement('div');
ptr.className = 'pointer';
ptr.style.left = `${rand(0, 100)}%`;
ptr.style.top = `${rand(0, 100)}%`;
elPointers.appendChild(ptr);
}
};
// 关键：仅更新容器 translate，零布局计算
const movePointers = (e) => {
const xCenter = (e.clientX / elBody.offsetWidth) - 0.5;
const yCenter = (e.clientY / elBody.offsetHeight) - 0.5;
elPointers.style.translate = `${xCenter * 100}% ${yCenter * 100}%`;
};
// 绑定事件
elBtn.addEventListener('click', () => {
createPointers();
moveBtn();
elBody.style.background = `hsl(${Math.floor(rand(0, 360))}, 80%, 50%)`;
});
elBody.addEventListener('pointermove', movePointers);
// 启动
moveBtn();
createPointers();✅ 优势总结：
- 零延迟：translate 由合成器线程处理，不触发重排，帧率稳定 60fps；
- 高扩展性：新增 100 个假光标不影响性能，因仅操作单个容器；
- 精准对齐：主光标作为容器背景图，天然与鼠标物理位置严格同步；
- 兼容性强：pointermove 替代 mousemove，支持触控笔等输入设备。
⚠️ 注意事项：
- 务必设置 pointer-events: none 到光标容器，否则会拦截按钮点击；
- 若需支持缩放页面（zoom 或 transform: scale），需额外校正坐标比例；
- 图片资源建议使用内联 SVG 或雪碧图以减少 HTTP 请求，进一步降低首屏延迟。
