Css GPU加速动画和模糊内容

问题：为什么我的CPU在应用模糊时注册为~30%，而在未对动画对象应用模糊时注册为~6%

详细信息：

我在一个页面上有一组随机生成的项目，其中指定了一个CSS动画（在CSS文件中），并且随机生成了宽度、高度以及重要的模糊值，这些值都是内联应用的

CSS文件样式如下所示：

animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);

transform: translateZ(0);

宽度、高度和模糊通过

style

属性内联应用

<div class="foo" style="width:99px;height:99px;
                        filter:blur(2px);
                        -webkit-filter:blur(2px) opacity(0.918866247870028);
                        -moz-filter:blur(2px) opacity(0.918866247870028);
                        -o-filter:blur(2px) opacity(0.918866247870028);
                        -ms-filter:blur(2px) opacity(0.918866247870028);"></div>

---

不要在内联样式中模糊它。将你的模糊放在样式文件中。

我不认为模糊实际上是造成你的问题的原因，它只是看起来比以前更明显。问题在于，动画中的

transform:translateY

正在覆盖用于强制GPU加速的

transform:translateZ（0）

这是您正在运行的代码的时间线记录，请注意主线程和光栅线程上的所有活动：

现在将其与我应用的录制进行比较，

将更改：将
转换为
.foo
：


主屏幕和光栅上没有任何活动

应用此修复程序有两个步骤：

应用
将更改：将
转换为
.foo
。这将让浏览器知道您打算更改该属性，并让它在GPU上渲染该元素以解决此问题

Edge和IE支持的任何版本目前都不会更改。因此，我们将使用
transform:translate3d（0，-1000px，0）以强制GPU加速。请注意，这是一个黑客攻击，因此我们将检测对
的支持，并在支持它的浏览器中使用
transform:translateY

最终代码：

@keyframes rise {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 1000px, 0);
  }
}

@supports (will-change: transform) {
  @keyframes rise {
      0% {
          transform: translateY(0px);
      }
      100% {
          transform: translateY(1000px);
    }
  }
}

div {
  width: 100px;
  height: 100px;
  background: #f00;
  animation: rise forwards 2s linear infinite;
  will-change: transform;
}

请参见此处了解工作版本：
无关，但您在
过滤器：blur（2）px
Good spot Chris中有一个输入错误。谢谢，我很惊讶。当使用模糊而不是硬件加速时，我预计CPU的使用率会很高。模糊是一项昂贵的操作。您是否已使用
渲染
下的
显示层边框
设置在开发工具中检查它是否在GPU上？启用
显示层边框
后，我看到每个动画对象都有自己的边框。我不熟悉这个工具。因为它们有自己的层，这是否意味着它们正在被硬件加速？我看到当模糊打开时使用23MB的GPU内存，当模糊关闭时使用20.6MB的GPU内存。这是GPU在这两种情况下都被使用的一个好指标吗？这对我的问题有什么帮助？
@keyframes rise {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 1000px, 0);
  }
}

@supports (will-change: transform) {
  @keyframes rise {
      0% {
          transform: translateY(0px);
      }
      100% {
          transform: translateY(1000px);
    }
  }
}

div {
  width: 100px;
  height: 100px;
  background: #f00;
  animation: rise forwards 2s linear infinite;
  will-change: transform;
}