css - 动画和模糊内容的 GPU 加速

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 的记录进行比较:

在主要和光栅上没有任何事件。

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

1. 应用 will-change: transform 到 .foo。这会让浏览器知道您打算更改该属性，并让它在 GPU 上渲染该元素以解决这个问题。

2. 目前没有任何版本的 Edge 和 IE 支持 will-change。因此我们将在动画中使用 transform: translate3d(0, -1000px, 0); 来强制 GPU 加速。请注意，这是一个 hack，因此我们将检测对 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