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

我不\xe2\x80\x99t认为模糊实际上导致了你的问题，它似乎使它比以前更明显。问题是transform: translateY你的动画中的 正在覆盖transform: translateZ(0)you\xe2\x80\x99re 用于强制 GPU 加速的内容。

\n\n

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

\n\n

\n\n

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

\n\n

\n\n

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

\n\n

应用此修复有两个步骤：

\n\n

\n

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

\n

2. will-change目前没有 Edge 和 IE 版本支持。因此我们\xe2\x80\x99将transform: translate3d(0, -1000px, 0);在动画中使用强制GPU加速。请注意，这是一个 hack，因此我们\xe2\x80\x99 将检测对的支持will-change并使用transform: translateY在支持它的浏览器中使用。

\n

\n\n

最终代码：

\n\n

@keyframes rise {\n    0% {\n        transform: translate3d(0, 0, 0);\n    }\n    100% {\n        transform: translate3d(0, 1000px, 0);\n  }\n}\n\n@supports (will-change: transform) {\n  @keyframes rise {\n      0% {\n          transform: translateY(0px);\n      }\n      100% {\n          transform: translateY(1000px);\n    }\n  }\n}\n\ndiv {\n  width: 100px;\n  height: 100px;\n  background: #f00;\n  animation: rise forwards 2s linear infinite;\n  will-change: transform;\n}\n

\n\n

请参阅此处的工作版本： http://jsbin.com/mosuvikoto/edit ?html,css,output

\n