CSS动画重载CPU

Question

我有一个动画和JS交替2个div和改变他们的背景图像(从几十个图像阵列)，某种可互换的div。一切都很好，但是当动画运行时，我可以看到我的CPU是100%。起初，我认为这可能是setInterval造成的，但是当我将代码从交替图像改为每次迭代增加一个数字并将其记录到控制台时，我看到CPU负载急剧减少，大约减少了40%-50%。所以我知道这可能是动画造成的。

以下是我的HTML代码：

<div class="wallpaper wallpaper-1" id="wallpaper-1"></div>
<div class="wallpaper wallpaper-2" id="wallpaper-2"></div>

CSS：

.wallpaper {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-animation-timing-function: linear;
}

.animate {
    -webkit-animation-name: fadeInOut;
    -webkit-animation-duration: 6s;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    16% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

JS让这一切都发生了：

Wallpapers.get().then(function(list) {
    var wp1, wp2, divs = [], path, bgs = [], counterBgs = 0, bgsLength, currentId, doInterval;
    wp1 = document.getElementById('wallpaper-1');
    wp2 = document.getElementById('wallpaper-2');
    divs = [ wp1, wp2 ];
    path = 'assets/img/wallpapers/';
    bgs = list.data;
    bgsLength = bgs.length;

    //Preload images
    for(var i = 0; i < bgsLength-1; i++) {
        var wp = new Image();
        wp.src = path+list.data[i];
    }

    function manageBg() {
        setInterval(function(){
            doInterval();
        }, 4000);
    }

    doInterval = function doInterval() {
        currentId = counterBgs % bgsLength;
        if (counterBgs % 2 === 0) {
            wp1.style.backgroundImage = "url(" + path + bgs[currentId] + ")";
            wp1.classList.add('animate');
            wp1.style.zIndex = 1;
            wp2.style.zIndex = 0;
            setTimeout(function() {
                wp1.classList.remove('animate');
            }, 5950);
        } else {
            wp2.style.backgroundImage = "url(" + path + bgs[currentId] + ")";
            wp2.classList.add('animate');
            wp1.style.zIndex = 0;
            wp2.style.zIndex = 1;
            setTimeout(function() {
                wp2.classList.remove('animate');
            }, 5950);
        }
        counterBgs++;
    };
    doInterval();
    manageBg();
});

有什么办法可以减少CPU过载吗？

Answer 1

答案是css的意志力属性。

will change是一种通过让浏览器知道哪些属性和元素即将被操作来优化动画的属性，可能会提高特定操作的性能。 资料来源：将-更改- css技巧。

will-change属性将使用硬件加速，以减少CPU的负载，并将CSS3动画/转换分配给GPU。

老者：translateZ()或translate3d()黑客 很长一段时间以来，我们一直在使用被称为translateZ() (或translate3d())的攻击(有时也称为空转换哈克)来欺骗浏览器，将我们的动画和转换转化为硬件加速。我们一直在通过增加一个简单的三维变换来完成这个工作，这个元素不会在三维空间中进行转换。例如，在二维空间中动画的元素可以通过添加以下简单规则来进行硬件加速： 变换: translate3d(0，0，0)； 硬件-加速一个操作的结果是创建一个所谓的排序层，上传到GPU并由GPU合成。然而，创建强制黑客层可能并不总是解决页面上某些性能瓶颈的方法。层创建技术可以提高页面速度，但它们需要付出代价:它们占用系统RAM和GPU中的内存(尤其是在移动设备上)，而拥有大量内存可能会产生不良影响(尤其是对移动设备)，因此必须明智地使用它们，并且需要确保硬件--加速操作将真正提高页面的性能，并且不会因为页面上的另一个操作而造成性能瓶颈。 为了避免图层创建的黑客行为，引入了一个新的CSS属性，它允许我们提前通知浏览器我们可能会对一个元素进行什么样的更改，从而使它能够优化它提前处理元素的方式，比如在动画实际开始之前执行可能昂贵的操作准备工作，比如动画。此属性是新的“遗嘱更改”属性。 新:光荣的意志改变财产 will-change属性允许您提前通知浏览器您可能对元素所做的更改类型，以便它能够在需要之前设置适当的优化，从而避免了可能对页面响应产生负面影响的不小的启动成本。元素可以更改和呈现得更快，页面将能够快速更新，从而获得更流畅的体验。 例如，当对元素使用CSS3D转换时，元素及其内容可能会被提升到一个层，正如我们前面提到的，然后再将它们组合(绘制到屏幕上)。然而，在一个新的层中设置元素是一种相对昂贵的操作，它可以将转换动画的启动延迟一个明显的一秒，从而导致明显的“闪烁”。 为了避免这种延迟，您可以在更改实际发生之前一段时间通知浏览器。这样，它将有一些时间为这些更改做准备，这样当这些更改发生时，元素的层就可以准备好，并且可以执行转换动画，然后元素可以被呈现，页面可以快速更新。 使用will-change，向浏览器暗示即将发生的转换，只需将此规则添加到您希望转换的元素中即可： 意志改变:转变； 还可以通过指定要更改的属性的名称，向浏览器声明要更改元素的滚动位置(元素在可见滚动窗口中的位置以及在该窗口中可见的元素的多少)、其内容或一个或多个CSS属性值。如果希望或计划更改元素的多个值/方面，则可以提供逗号分隔值的列表。例如，如果您期望元素被动画化和移动(其位置已更改)，您可以向浏览器声明如下所示： 意志改变:改变，不透明； 指定您想要更改的内容，可以让浏览器对这些特定更改所需的优化做出更好的决定。这显然是一个更好的方式，以实现速度提高，而不诉诸黑客和迫使浏览器进入层创造，可能是必要的，也可能没有用。 文章来源- 您需要了解的有关CSS的所有信息都会更改属性。

你的css

.wallpaper {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    will-change: transform, opacity;
    -webkit-animation-timing-function: linear;
}

.animate {
    -webkit-animation-name: fadeInOut;
    -webkit-animation-duration: 6s;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    16% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

其他有用来源：

• 您需要了解的有关CSS的所有信息都会更改属性。
• CSS-技巧文章
• SNOOK.CA
• W3C编辑稿
• Mozilla开发人员网络
• 浏览器支持
• 将更改:更新浏览器支持