为什么火狐CPU使用率一开始就会跳升到100% --如何改变一些div的宽度和左坐标？

Question

问题

请有人看一下代码，告诉我我是在做什么来提高Firefox中CPU的使用率，还是这是Firefox的一个bug？在这一点上，这让我精神错乱，我几乎失去了想法。Firefox中启用了硬件加速。

我已经尝试了相同的动画在Chrome，铬和PaleMoon没有任何问题。除了Firefox之外，所有浏览器的CPU使用率都不会有太大变化，即使在动画运行了一个多小时之后，但在Firefox中，一旦动画开始，CPU使用率就会直线上升到90%以上，并且一直上升(即使标签关闭)，直到达到100%为止。停止CPU使用的唯一方法是完全杀死Firefox。

硬件和操作系统

我使用的笔记本电脑的核心是i7-4700mq处理器，16 GB RAM，500 GB SSD和1 TB HDD。

我正在使用Kubuntu16.04(添加了KDE项目霓虹灯存储库)，内核升级到4.10.10。

幻灯片描述

幻灯片很简单，应该是：

1. 图像在.中褪色。

这是通过使用jQuery fadeIn()实现的。

1. 图像开始放大

这是通过使用CSS3转换来实现的。将一个类添加到jQuery中的图像中，该类将图像的宽度设置为120%，其左坐标设置为-10%。

如果我删除这一步，动画将完美运行，Firefox的CPU利用率根本不会改变。

1. 经过一个设定的间隔后，图像就会从中消失。

这是使用jQuery fadeOut()完成的。当包含图像的div消失后，负责缩放的CSS类将从图像中移除。

1. 另一幅图像已褪色，而前一幅图像正在淡出

这是使用jQuery fadeIn()完成的。一旦div褪色，缩放CSS类就会添加到图像中。

工作样品

您可以在码页上找到幻灯片的工作示例。

代码

<div class="slideshow">
    <div class="slide" id="slide-1">
        <img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/>
    </div>
    <div class="slide" id="slide-2">
        <img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/>
    </div>
</div>

CSS

.slideshow{
    width: 100%;
    overflow: hidden;
}
.slide{
    width: 100%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
}
.slide img{
    position: relative;
    margin-left:0px;
    width:100%;
    min-width:100%;
    transition: all 8s;
}
.slide_zoom{
    width: 120%!important;
    margin-left: -10%!important;
}

Javascript

var current=1;
var prev=1;
var counter=0;
var slide_duration=8000;
var transition_duration=700;
var interval;
var width=($(window).width()+200)+'px';
$(function(){
    function slideshow_play(){
    console.log(current);
        $('#slide-'+current).fadeOut(transition_duration,function(){
            $('#slide_img-'+prev).removeClass('slide_zoom');
        });
        prev=current;
        if (current<$('.slide').length){
            current=current+1;
        }
        else{
            current=1;
        }

        $('#slide-'+current).fadeIn(transition_duration, function(){
            $('#slide_img-'+current).addClass('slide_zoom');
        });
    }

    $('.slide').each(function(){
        var img=$(this).find('img');
        var src=$(img).data('src');
        var image=new Image();
        image.src=src;
        image.onload=function(){
            counter+=1;
            img.prop('src', this.src);
            if (counter==($('.slide').length)){
                $('#slide-'+current).fadeIn(500);
                var timeout=window.setTimeout(function(){
                    $('#slide_img-'+current).addClass('slide_zoom');
                    interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
                },500);
            }
        }
    });
});

Answer 1

动画width和left不是表演性的，使用transform是。

下面是一个更新的Codepen和一个堆栈片段，在这里我删除了width/left，并添加了transform: scale(1.2)和transform-origin: center top;

我还建议您尽可能多地使用CSS动画/转换，即切换类，因为它们通常比基于脚本的类具有更高的性能。

​

var current=1;
var prev=1;
var counter=0;
var slide_duration=8000;
var transition_duration=700;
var interval;
var width=($(window).width()+200)+'px';
$(function(){
    function slideshow_play(){
    console.log(current);
        $('#slide-'+current).fadeOut(transition_duration,function(){
            $('#slide_img-'+prev).removeClass('slide_zoom');
        });
        prev=current;
        if (current<$('.slide').length){
            current=current+1;
        }
        else{
            current=1;
        }

        $('#slide-'+current).fadeIn(transition_duration, function(){
            $('#slide_img-'+current).addClass('slide_zoom');
        });
    }

    $('.slide').each(function(){
        var img=$(this).find('img');
        var src=$(img).data('src');
        var image=new Image();
        image.src=src;
        image.onload=function(){
            counter+=1;
            img.prop('src', this.src);
            if (counter==($('.slide').length)){
                $('#slide-'+current).fadeIn(500);
                var timeout=window.setTimeout(function(){
                    $('#slide_img-'+current).addClass('slide_zoom');
                    interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
                },500);
            }
        }
    });
});

.slideshow{
    width: 100%;
    overflow: hidden;
}
.slide{
    width: 100%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
}
.slide img{
    position: relative;
    margin-left:0px;
    width:100%;
    min-width:100%;
    transition: all 8s;
    transform-origin: center top;
}
.slide_zoom{
    /*
    width: 120%!important;
    margin-left: -10%!important;
    */
    transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
    <div class="slide" id="slide-1">
        <img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/>
    </div>
    <div class="slide" id="slide-2">
        <img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/>
    </div>
</div>

​