使用jQuery动画高CPU使用率

Question

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

目前这占用了我处理器时间的大约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 - 他们抛出了对那里的旧浏览器的支持）。

真的要衡量你的优点和缺点。

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