Performance CSS动画使CPU过载

我有一个动画和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>

让一切顺利的是：

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();
});

wallpaps.get（）.then（函数（列表）{
变量wp1，wp2，divs=[]，path，bgs=[]，counterBgs=0，bgsLength，currentId，doInterval；
wp1=document.getElementById（'wallpaper-1'）；
wp2=document.getElementById（'wallpaper-2'）；
divs=[wp1，wp2]；
路径='assets/img/wallpaps/'；
bgs=list.data；
bgsLength=bgs.length；
//预加载图像
对于（变量i=0；i

如何减少CPU过载？答案是css的属性

将更改是一个通过让浏览器知道哪些属性和元素即将更改来优化动画的属性 操纵，可能会提高该特定系统的性能 手术

文章来源：

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

旧的：translateZ（）或translate3d（）黑客 相当一段时间以来，我们一直在使用被称为 translateZ（）（或translate3d（））hack（有时也称为null 转换（黑客）欺骗浏览器推送我们的动画和 转换为硬件加速。我们通过添加 对不进行变换的图元进行简单的三维变换 在三维空间中。例如，在中设置动画的元素 通过添加此项，可以硬件加速二维空间 简单的规则是：

transform: translate3d(0, 0, 0);

硬件加速一个操作会产生什么结果 称为合成器层，上载到并由 GPU。但是，强制黑客层创建可能并不总是最重要的 页面上某些性能瓶颈的解决方案。图层创建 技术可以提高页面速度，但它们也有成本：它们需要 系统RAM和GPU上的up内存（尤其限于移动设备 设备）并且拥有大量设备可能会产生不良影响（尤其是在 移动设备），因此必须明智地使用它们，您需要确保 硬件加速您的操作将真正有助于 页面的性能，而不是性能瓶颈 是由页面上的另一个操作引起的

为了避免层创建黑客，一个新的CSS属性已经被开发出来 介绍，这让我们提前通知浏览器什么 我们可能对元素进行的各种更改，从而允许它 要优化它提前处理元素的方式，请执行 为一项操作做准备的潜在昂贵工作，如 例如，动画在动画实际开始之前。这 属性是新的将更改的属性

新：光荣将改变财产 will change属性允许您提前通知浏览器 您可能对元素进行何种更改的时间，因此 它可以在运行之前设置适当的优化 因此，避免了可能产生的非琐碎启动成本 对页面响应性的负面影响。这些元素可以是 更改和渲染速度更快，页面将能够更新 快速，带来更流畅的体验

例如，在元素上使用CSS 3D变换时，元素 它的内容可能会升级到一个层，正如我们提到的 在合成（绘制到屏幕上）之前的较早时间。 但是，在新层中设置元素是一个相对简单的过程 昂贵的操作，可能会延迟转换的开始 动画被明显缩短了几分之一秒，导致 明显的“闪烁”

为了避免此延迟，您可以向浏览器通知 在实际发生之前的一段时间发生变化。那样的话，它就会 为这些变化准备一些时间，以便在这些变化发生时 发生时，元素的层将准备就绪，并且变换动画 可以执行，然后可以呈现元素和页面 快速更新

使用将更改，向浏览器提示即将发生的事件 转换可以像将此规则添加到元素一样简单 你期待着被改变：

will-change: transform;

will-change: transform;

will-change: transform, opacity;

.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);
    }
}