分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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);

transform: translateZ(0);

宽度,高度和模糊通过样式属性内联应用.

<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：

动画的上升看起来如下：

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

解决方法

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

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

现在将其与我应用的记录进行比较改变：转换为.foo：

主和光栅上没有任何活动.

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

> Apply will-change：转换为.foo.这将让浏览器知道您打算更改该属性并让它在GPU上呈现该元素以解决此问题.
>目前没有任何版本的Edge和IE支持会发生变化.因此我们将使用transform：translate3d(0,-1000px,0);在动画中强制GPU加速.注意这是一个hack,所以我们将检测对will-change的支持并在支持它的浏览器中使用transform：translateY.

最终代码：

@keyframes rise {
    0% {
        transform: translate3d(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;
}