优化JS中mousemove事件的CSS渐变跟随平滑效果

你的卡顿问题大概率来自高频事件触发的频繁重绘和低效的样式更新方式，下面是具体的问题分析和优化方案：

常见卡顿原因 #

1. mousemove事件每秒会触发数十到上百次，如果每次触发都直接修改元素的background属性，浏览器会频繁执行样式计算、重绘操作，导致帧丢失。
2. 直接修改完整的渐变字符串，而非局部参数，会让浏览器重新解析整个背景样式，增加计算开销。
3. 未启用GPU加速，渐变更新依赖CPU处理，无法利用硬件加速提升流畅度。

优化实现方案 #

1. 用CSS变量+requestAnimationFrame控制更新节奏 #

CSS变量的更新比直接拼接background字符串更高效，配合requestAnimationFrame可以让样式更新严格对齐浏览器的重绘周期，避免无效更新：

<div class="gradient-wrap"></div>

.gradient-wrap {
  position: fixed;
  inset: 0;
  /* 用CSS变量控制渐变中心位置 */
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(138, 43, 226, 0.25),
    transparent 60%
  );
  /* 告诉浏览器该属性会频繁变化，提前分配GPU资源 */
  will-change: background-position;
  /* 强制提升到GPU合成层 */
  transform: translateZ(0);
}

const wrap = document.querySelector('.gradient-wrap');
let targetX = 0;
let targetY = 0;
let currentX = 0;
let currentY = 0;

function updateGradient() {
  // 缓动过渡，让跟随更自然（可选，增强微妙感）
  currentX += (targetX - currentX) * 0.1;
  currentY += (targetY - currentY) * 0.1;
  
  wrap.style.setProperty('--mouse-x', `${currentX}px`);
  wrap.style.setProperty('--mouse-y', `${currentY}px`);
  
  requestAnimationFrame(updateGradient);
}

// 启动更新循环
requestAnimationFrame(updateGradient);

window.addEventListener('mousemove', (e) => {
  // 只记录目标位置，由updateGradient统一处理样式
  targetX = e.clientX;
  targetY = e.clientY;
});

2. 关键优化点解析 #

• requestAnimationFrame：确保样式更新在浏览器每帧渲染前执行，避免帧丢失，让动画始终保持60fps。
• CSS变量：仅更新渐变的位置参数，而非整个background属性，减少浏览器样式计算开销。
• GPU加速：will-change和transform: translateZ(0)将元素提升到GPU合成层，渐变更新由GPU处理，大幅降低CPU负载。
• 缓动过渡：通过简单的缓动公式让渐变移动更平滑，既解决卡顿，又强化了你想要的"微妙"跟随效果。

3. 额外优化建议 #

• 如果不需要绝对实时的跟随，可以给mousemove事件加节流（比如用setTimeout限制每秒触发20次），进一步降低事件触发频率。
• 避免在渐变元素上添加复杂的子元素，减少重绘区域的大小。

内容的提问来源于stack exchange，提问作者mtm