jquery - JQuery 动画的 CPU 使用率较高

Question

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

目前，这大约占用了我处理器时间的 10%。有没有办法进一步降低 CPU 使用率？我减少了 span 元素的数量，但这并没有多大帮助。

我读到了关于设置 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 版本 - 他们放弃了对旧版浏览器的支持)。 p>

只是需要真正权衡你的利弊。

如果您有此版本的工作版本，您应该将其发布，以便我们可以尝试诊断/查明问题代码。