本文介绍一种通过隐藏原生光标并使用 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），再映射为百分比位移，确保响应线性且跨分辨率一致。
以下是精简可复用的实现代码：
* {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 请求，进一步降低首屏延迟。
