使用JQuery动画的高CPU使用率

Question

我在网上发现了一个jQuery脚本，它在视口下创建了多个span元素（每个包含相同的小动画gif），并以不同的速度将每个元素移动到页面顶部，然后一遍又一遍地重复循环。 / p>

目前，这大约占我处理器时间的10％。反正有没有进一步减少CPU使用率？我减少了跨度元素的数量，但这没有多大帮助。

我读到了关于设置setInterval的内容，我已经完成了它并且它有所帮助，但我仍然认为它太高了我认为是一个简单的动画。

var easings=[]
$.each($.easing,function(i,v){
    if ($.isFunction(v))
        easings.push(i)
})
function randomEasing(){
    return easings[Math.floor(Math.random()*easings.length)]
}
function cloud(x,y,toX,toY,speed){
    var easingUp=randomEasing()
    $('<span class="cloud">')
    .text(easingUp)
    .css({
        top:y,
        left:x
    })
    .animate({
        top:toX,
        left:toY
    },{
        duration:speed||500,
        complete: function(){
            $(this).remove();
            cloud(x,y,toX,toY,speed)
            },
        specialEasing: {
            top: easingUp,
            height: randomEasing()
        }
    })
    .appendTo('body')
}
function randy(from,to){
    return  Math.floor(Math.random()*(to-from)+from)
}
$(function(){
    var bottom=$(window).height()+90
    var right=$(window).width()-200
    for(var left=50;left<right;left+=50){
        cloud(left,bottom+90,-70,"-="+randy(-10,10),randy(10000,24000))
    }
})
jQuery.fx.interval = 60;

我还能做些什么来降低CPU使用率，或者这是我用jQuery做的最好的，应该考虑其他解决方案？

Answer 1

• 分别使用.width()或.height()和.innerWidth / .outerWidth与高度之间的这种低级别的效果差异是巨大。
• 您肯定应缓存选择器。
• 将分号放在他们所属的位置。 Javascript不会强迫你这么做，但是你支付的价格是浏览器会猜测它应该去哪里的猜谜游戏。
• 您的代码中的绝对最严重违规者很遗憾是您可能无法妥协的 - Math.floor()和Math.random()
• 抛弃jQuery引用。实际上需要CPU和内存的东西无法在每次需要时通过像jQuery这样的大型库。原生Javascript通常指数级更快。

如果您想对哪些内容最有益，请建议 JSPerf.com

测试你将要使用的不同代码片段，看看你应该改变什么（或者保持相同 - jQuery实际上可以在某些浏览器上更有效地做一些事情）。

Here's an example set to show the performance gaps between native JS and jQuery

jQuery最大的吸引力在于其跨浏览器兼容性彻底性。您也可以手动执行此操作，但 jQuery已经过多年优化以便为您处理。（只是不是版本2.x - 他们在那里抛弃了对旧浏览器的支持）。

真的要权衡你的利弊。

如果你有一个工作版本，你应该发布它，以便我们可以尝试诊断/查明问题代码。