CSS linear-gradient背景动画CPU占用高且窗口resize出现背景bug如何解决

问题根源 #

现有低CPU优化方案通过将渐变挂载到::before伪元素、放大伪元素尺寸后调用transform位移实现动画效果，transform走GPU合成层渲染，因此CPU占用可降低至3%-5%。resize窗口时出现显示bug的核心原因是：伪元素的初始尺寸在页面加载时完成计算，窗口尺寸变化后伪元素尺寸、位移基准没有同步更新，导致背景出现留白、断层问题。

修复步骤 #

• 第一步：基础样式约束，确保伪元素永远和视口尺寸绑定

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  z-index: -1;
  background: linear-gradient(45deg, #3f87a6, #ebf8e1, #f69d3c, #3f87a6);
  animation: gradientMove 15s ease infinite;
}
@keyframes gradientMove {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-75%, 0);
  }
  50% {
    transform: translate(-75%, -75%);
  }
  75% {
    transform: translate(0, -75%);
  }
  100% {
    transform: translate(0, 0);
  }
}

• 第二步：添加防抖resize事件处理，同步更新伪元素尺寸

// 防抖函数，避免resize频繁触发更新
function debounce(func, delay = 150) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}
const handleResize = debounce(() => {
  const bgPseudo = document.createElement('style');
  // 强制重置伪元素尺寸触发重计算
  bgPseudo.innerHTML = 'body::before{ width: 400%; height: 400%; }';
  document.head.appendChild(bgPseudo);
  requestAnimationFrame(() => {
    document.head.removeChild(bgPseudo);
  });
})
window.addEventListener('resize', handleResize);

修复效果 #

优化后CPU占用依然维持在3%-5%的水平，resize窗口不会再出现背景显示异常问题。

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