使用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 - 他們拋出了對那裏的舊瀏覽器的支持）。

真的要衡量你的優點和缺點。

如果你有這個工作版本，你應該發佈它，所以我們可以嘗試和診斷/查明問題代碼。