css 线性渐变背景 CPU 高使用率

Question

需要在 body 中创建线性渐变动画，但它使用 cpu 很多，导致粉丝大声运行。

我找到了这个解决方案

这个技巧将 cpu 使用率降低到 3-5%，这很棒。但是当你调整 window 的大小时，它会在后台创建一个错误。

试图创建调整大小功能，因为我猜想当您调整 window 大小时，宽度属性会发生变化，从而导致错误。但是没有成功。

[Codepen](https://codepen.io/iclassici/pen/poPXRyp)

Answer 1

正在做：

  body.classList.remove('bg');
  body.classList.add('bg');

实际上什么也没有发生，因为 class 在系统有机会 recalculate/redraw 之前恢复了。

您需要像之前那样删除 class，然后等待再恢复。试试 setTimeout 或 requestAnimationFrame。

如果您可以将您的代码编写成我们可以运行在您的问题中的代码片段，这将有助于我们进行测试并给出更完整的答案。

更新：采用 codepen 中给出的代码，此代码段对调整大小功能进行了更改，删除了 bganimation class，设置了短超时并恢复了 class。这确保系统将重置它提供给 GPU 的任何参数。

注意：在我相当强大的笔记本电脑上，Windows10，背景动画占用的 GPU 不到 2%CPU，大约占 GPU 的 20%。

window.addEventListener("resize", myFunction);

function myFunction() {
  body = document.getElementsByTagName('body')[0];
  body.classList.remove('bganimation');
  setTimeout(function() {
    body.classList.add('bganimation');
  }, 100);
}

.bg {
  width: 100vw;
  height: 100vh;
}

.bg::before {
  content: '';
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 600%;
  height: 100%;
  bottom: 0;
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
  background-size: 100% 100vh;
  background-repeat: no-repeat no-repeat;
  background-position: left top;
}

.bganimation {
  animation: gradient 16s linear infinite alternate;
}

@keyframes gradient {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400vw);
    /* 5/6x100% */
  }
}

<body class="bg bganimation">
</body>

css 线性渐变背景 CPU 高使用率

css linear-gradient background CPU high usage

css

background

cpu-usage

css-animations