jQuery的animation（）和浏览器的性能
我有一些非常缓慢的元素。 本质上，我减less了40秒左右的两幅图像的左边距。
在视觉上，它的工作很好。 但是，在处理animation过程中，我的处理器会跳到大约50％的使用率。 这不是特定于任何单个浏览器，在Safari3和Firefox3上都是一样的。 如果我有两个浏览器运行的页面，我的CPU尖叫大约95％的使用率。
我正在使用jQuery 1.3。 两个animation都是同时发生的。 页面上没有Flash。 如果我将代码注释掉（删除animation）并刷新页面，我的处理器将立即恢复正常使用。
我希望我不必诉诸Flash，但即使在Hulu.com上观看节目也不会像我这样使用CPU。
思考？
我认为jQuery animate（）的工作方式是它使用一个定时器，定期触发并调用一个函数来更新DOM来反映animation的状态。 通常animation相对较短，可能会覆盖相当数量的屏幕空间，所以我怀疑（没有确认）定时器到期，并且以相当高的速率重置以产生平滑的animation。 由于您的animation需要很长时间，因此您可能可以修改animationfunction，以便可以通过选项设置animation进行的速度。 在你的情况下，你只需要每250毫秒左右更新一次，因为你大概在每秒约3-4像素。
我知道这是一个古老的问题， Tim提供了一个很好的答案 ，但我只是想我应该发布一个更新寻找解决这个问题的人，因为现在有一个更简单的方法…
从jQuery 1.4.3开始，您可以通过jQuery.fx.interval属性直接设置jQuery的animation使用间隔。 所以你可以简单地做一些事情：
jQuery.fx.interval = 50; 人们提到减缓jQuery的刷新率。 你可以使用这个文件（jquery.animation-fix.js）覆盖jQuery 1.4中的定时器函数：
function now() { return (new Date).getTime(); } jQuery.fx.prototype.custom = function( from, to, unit ) { this.startTime = now(); this.start = from; this.end = to; this.unit = unit || this.unit || "px"; this.now = this.start; this.pos = this.state = 0; var self = this; function t( gotoEnd ) { return self.step(gotoEnd); } t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) { //timerId = setInterval(jQuery.fx.tick, 13); jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050); } }
所以修改这个在它的行
jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);
将50更改为任何您想要的时间间隔。 即以毫秒（ms）
如果将这些代码保存在不同的文件中，可以像这样附加它：
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.animation-fix.js" type="text/javascript"></script>
jQuery animate使用javascript函数“setInterval”每隔几毫秒更新一次obects。 不幸的是，jQuery的时间间隔是默认的“13ms”。 那76更新每一秒。 这样的慢和中等animation的方法很多。
13ms硬编码成jQuery。 所以你只能直接在jQuery.js中改变这个值。 如果你只有缓慢的情绪，你可以达到100毫秒。 如果你有更快的animation，你应该把它设置为50。
您可以更改setInterval（）;的参数。 在函数自定义中。 'jQuery.fx.prototype {… custom：function（）{…} …}'
animation涉及循环操作，而且无论如何，这些动作都会使CPU受到影响。
我不知道如何使用jQuery很容易，但需要发生的是animation需要消耗更less的周期。 你要么让锯齿变得更加锯齿（显示不光滑），需要优化锯齿，或者减less锯齿的工作。
40秒？ 是不是有点长的animation？ 我认为他们应该比这个更直接一点。
我刚刚观看了Scriptaculous下的animation性能，发现类似的CPU峰值：对于IE来说，大约是50％，Firefox的性能稍微好一点（16-30％） – 都在DuoCore PC上。 既然JQuery和Scriptaculous都是通过更改底层的CSS来工作的，我认为可以肯定地说任何Javascript实现在计算上都是昂贵的。
你可能会被困在Flash中。
我真的很喜欢Tim发布的答案，尽pipe我需要在Drupal 6生产环境中使用此修补程序。
我已经安装了jQuery 1.3.2，通过使用jQuery更新模块，所以我使用的是Tim的修补程序专为jQuery 1.4而devise的。
遵循Tim的指示让我有90％的select，我不得不考虑10分钟的想法来代替这个代码。
定时器值为25 – 33似乎比中速animation（如衰落背景图像）的13ms好得多。
var timerId; function now() { return (new Date).getTime(); } jQuery.fx.prototype.custom = function( from, to, unit ) { this.startTime = now(); this.start = from; this.end = to; this.unit = unit || this.unit || "px"; this.now = this.start; this.pos = this.state = 0; var self = this; function t( gotoEnd ) { return self.step(gotoEnd); } t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !timerId ) { timerId = setInterval(function(){ var timers = jQuery.timers; for ( var i = 0; i < timers.length; i++ ) if ( !timers[i]() ) timers.splice(i--, 1); if ( !timers.length ) { clearInterval( timerId ); timerId = undefined; } }, 25); } };
