8

问题:为什么我的 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);
    }
}
4

2 回答 2

2

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

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

在此处输入图像描述

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

在此处输入图像描述

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

应用此修复有两个步骤:

  1. 适用will-change: transform.foo. 这将使浏览器知道您打算更改该属性并让它在 GPU 上呈现该元素以解决此问题。

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

于 2016-12-16T09:37:57.937 回答
-2

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

于 2016-03-28T18:23:43.257 回答