时间戳

首页 > 解决方案 > css线性渐变背景CPU高使用率

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

问题描述

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

我发现这个解决方案 动画线性渐变吞噬了 CPU 使用率

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

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

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

标签： cssbackgroundcss-animationscpu-usage

解决方案

这样做：

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

实际上什么都没有发生，因为在系统有机会重新计算/重绘东西之前恢复了类。

您需要像以前一样删除该类，然后等待再恢复它。尝试 setTimeout 或 requestAnimationFrame。

如果您可以将您的代码制作成一个片段，我们可以在您的问题中运行它，这将有助于我们测试事物并给出更完整的答案。

更新：使用 codepen 中给出的代码，此代码段对 resize 函数进行了更改，删除了 bganimation 类，设置了短超时并恢复了该类。这确保系统将重置它提供给 GPU 的任何参数。

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

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>

推荐阅读