Question

问题：为什么我的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>

启用模糊后，我的CPU使用率约为30％。当我禁用模糊时，CPU使用率下降到约6％。

这里发生了什么？当没有应用模糊时，chrome是否只能加速GPU？如果是这样，为什么？

更新1：

动画rise如下所示：

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

Answer 1

我不认为模糊实际上是导致你的问题，它似乎使它比以前更明显。问题是动画中的transform: translateY会覆盖您用来强制GPU加速的transform: translateZ(0)。

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

现在将其与我将will-change: transform应用于.foo的记录进行比较：

主要和光栅上没有任何活动。

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

将will-change: transform应用于.foo。这将让浏览器知道您打算更改该属性并让它在GPU上呈现该元素以解决此问题。
目前没有Edge和IE版本支持will-change。因此，我们将在动画中使用transform: translate3d(0, -1000px, 0);来强制GPU加速。请注意，这是一个黑客行为，因此我们会检测对will-change的支持，并在支持它的浏览器中使用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;
}

请点击此处查看工作版本：http://jsbin.com/mosuvikoto/edit?html,css,output

Answer 2

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

动画和模糊内容的GPU加速

2 个答案: