元素卡顿因left/top触发重排，应改用transform: translate(x,y)配合transition: transform实现硬件加速；需节流、统一单位、处理移动端兼容及多元素性能优化。
transition 配合 transform 实现鼠标跟随时，为什么元素“卡顿”或“追不上”
直接原因：用 left/top 做过渡目标属性，触发了 Layout（重排），浏览器无法高效合成帧。现代浏览器对 transform 的 translate() 有硬件加速支持，而定位属性没有。
- 必须把偏移逻辑从
left/top改成transform: translate(x, y) - 监听
mousemove时，建议节流（如requestAnimationFrame），否则高频更新会挤占主线程 - css 中要显式声明
transition: transform 0.2s ease-out，不能只靠 js 动态设 style —— 浏览器需要初始和终态都存在可过渡属性才能触发动画
如何让跟随偏移量“有缓冲感”，而不是生硬贴着鼠标
纯 transition 只能做线性/缓动插值，无法实现“滞后跟随”。真需求其实是“阻尼运动”，得靠 JS 控制位移节奏，CSS 过渡只负责最终渲染平滑。
- 不要依赖
transition模拟惯性，它没有状态记忆；改用requestAnimationFrame+ 简单物理公式（如current += (target - current) * 0.1） - 如果仍想用纯 CSS，可用
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)模拟轻微拖尾感，但效果有限 - 注意：
transform的数值单位必须一致（全用px或全用rem），混用会导致浏览器放弃优化
移动端 touchmove 下的兼容问题怎么处理
touch 事件默认不冒泡到 document，且 clientX/clientY 在某些安卓 webview 下可能为 0；同时，transform 在旧版 ios safari 中需加 -webkit-transform 前缀。
- 监听时优先用
document.addEventListener('touchmove', ... , { passive: false })，避免被浏览器静默阻止 preventDefault - 取坐标别只看
event.touches[0]，要 fallback 到event.changedTouches[0]和event.targetTouches[0] - CSS 中写两行：
transform: translate(0, 0); -webkit-transform: translate(0, 0);，iOS 12 及更早版本仍需前缀
多个跟随元素同时动，性能掉得厉害怎么办
每个元素独立监听 mousemove + requestAnimationFrame，容易造成回调堆积。核心矛盾不是“动得不够快”，而是“每帧都在读写 layout 属性”。
立即学习“前端免费学习笔记（深入）”；
- 统一用一个全局
requestAnimationFrame回调管理所有跟随元素的目标位置，避免重复绑定 - JS 中只更新
element.style.transform，绝不读取offsetLeft、getBoundingClientRect()等触发重排的属性 - 若元素数量 > 5 个，考虑用
CSS @Property+transition（chrome 110+），但兼容性差，目前仍以 JS 控制为主
实际最常被忽略的是：鼠标离开视口区域后，mousemove 事件就停了，但元素还停在最后位置。得监听 mouseleave 或 mouseout 主动重置目标点，否则下次进入时会出现“跳变”。