界面还原变慢时先检查哪些细节卡片跟手效果一抖不要先猜 GPU 不行。先录一段 Performance事件回调里有没有交错读写 DOM动画是不是在改布局属性图层有没有铺得过多。按这个顺序查通常比凭感觉调参数快。鼠标移动回调只收集数据把渲染合并到下一帧。边界矩形在进入、尺寸变化或滚动导致位置变化时更新别假定它永远不变const card document.querySelector(.card); let rect card.getBoundingClientRect(); let point; let queued false; const updateRect () { rect card.getBoundingClientRect(); }; window.addEventListener(resize, updateRect); window.addEventListener(scroll, updateRect, { passive: true }); card.addEventListener(pointermove, (event) { point event; if (queued) return; queued true; requestAnimationFrame(() { const x (point.clientX - rect.left) / rect.width - .5; const y (point.clientY - rect.top) / rect.height - .5; card.style.transform rotateX(${-y * 8}deg) rotateY(${x * 8}deg); queued false; }); });transform和opacity往往比改变宽高更轻但也不是性能护身符大面积模糊、阴影和背景更新仍可能昂贵。will-change只给当前交互对象结束后移除。效果做得克制些反而更像精心打磨过的界面。