Javascript 为什么Firefox的CPU使用率会在幻灯片开始改变某些div的宽度和左坐标时跃升到100%？ 问题:

有人能看一下代码，告诉我我是在做一些提高Firefox CPU使用率的事情，还是这是Firefox的bug？在这一点上，这让我精神错乱，我几乎没有主意了。Firefox中启用了硬件加速

我在Chrome、Chrome和Palemon中尝试了相同的动画，没有任何问题。除了Firefox之外，所有浏览器的CPU使用率在动画运行一个多小时后都没有太大变化，但在Firefox中，动画一开始，CPU使用率就直接跳到90%以上，并不断上升（即使关闭了选项卡），直到达到100%。停止CPU使用的唯一方法是完全杀掉Firefox

---

硬件和操作系统 我使用的笔记本电脑有一个核心i7-4700mq处理器、16 GB RAM、500 GB SSD和1 TB硬盘

我正在使用Kubuntu 16.04（添加了KDE项目Neon存储库），内核升级到4.10.10

幻灯片说明 幻灯片非常简单，应该：

图像已淡入。

这是通过使用jQuery fadeIn（）实现的

图像开始放大

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

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

在设定的间隔后，图像将淡出

这是使用jQuery fadeOut（）完成的。一旦包含图像的div淡出，负责放大的CSS类将从图像中删除

另一个图像淡入，而上一个图像淡出

这是使用jQuery fadeIn（）完成的。div淡入后，缩放CSS类将添加到图像中

---

工作样本 您可以在上找到幻灯片的工作示例

---

代码 HTML

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

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

var电流=1；
var-prev=1；
var计数器=0；
var滑动时间=8000；
var转换持续时间=700；
var区间；
变量宽度=（$（窗口）.width（）+200）+'px'；
$（函数（）{
功能幻灯片放映_播放（）{
console.log（当前）；
$（“#幻灯片-”+当前）.fadeOut（转换持续时间，函数（）{
$（'slide\u img-'+prev）.removeClass（'slide\u zoom'）；
});
prev=当前值；
如果（当前设置<代码>宽度

和<代码>左侧动画未执行，则使用<代码>变换即可

这里是一个和一个堆栈片段，我删除了

宽度
/
左侧
并添加了
变换：比例（1.2）
和
变换原点：中间顶部；

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


var电流=1；
var-prev=1；
var计数器=0；
var滑动时间=8000；
var转换持续时间=700；
var区间；
变量宽度=（$（窗口）.width（）+200）+'px'；
$（函数（）{
功能幻灯片放映_播放（）{
console.log（当前）；
$（“#幻灯片-”+当前）.fadeOut（转换持续时间，函数（）{
$（'slide\u img-'+prev）.removeClass（'slide\u zoom'）；
});
prev=当前值；
如果（Current）发布了一个答案。让我知道这是否更好。正如您所说，在其他浏览器中也可以，尝试刷新Firefox（转到
about:support
并单击刷新Firefox…）我的答案中是否缺少一些我可以添加或调整的内容，供您接受？我已接受您的答案：-）很抱歉，我完全忘记了这一点。没问题：）…谢谢谢谢你：-）我用“宽度”替换了“宽度”，用“比例”替换了“左”，它就可以工作了。我不必指定变换原点。我仍然很好奇，为什么Firefox在Chrome和Palemon可以处理而没有任何问题的东西上遇到了问题。
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);
            }
        }
    });
});