我有一些元素在页面上移动非常缓慢。本质上，我在 40 秒左右的时间内减少了两个图像的左边距。
从视觉上看，它运行良好。 但是，我的处理器在动画期间的使用率跃升至大约 50%。 这也不是特定于任何单一浏览器的 - 在 Safari3 和 Firefox3 上也是如此。如果我让两个浏览器都运行该页面，我的 CPU 会以大约 95% 的使用率尖叫。
我正在使用 jQuery 1.3。两个动画同时发生。页面上没有 Flash。如果我将代码注释掉（删除动画）并刷新页面，我的处理器会立即恢复正常使用。
我希望我不必求助于 Flash，但即使在 Hulu.com 上观看节目也不会像这样占用我的 CPU。
想法？
【问题讨论】：
标签： jquery performance animation cpu-usage
我知道这是一个老问题，Tim provided a great answer，但我只是想我应该为任何寻求此问题解决方案的人发布更新，因为现在有一种更简单的方法......
从 jQuery 1.4.3 开始，您可以通过 jQuery.fx.interval 属性直接设置 jQuery 的动画使用的间隔。所以你可以简单地做这样的事情：
jQuery.fx.interval = 50;
【讨论】：
13（毫秒）
我真的很喜欢 Tim 发布的答案，尽管我需要让这个修复程序在 Drupal 6 生产环境中工作。
我通过使用 jQuery 更新模块安装了 jQuery 1.3.2，因此我使用的与 Tim 的修复程序设计的 jQuery 1.4 之间存在一些差异。
按照 Tim 的指示，我完成了 90% 的工作，我只需要花 10 分钟的时间思考这个代码即可。
25 - 33 的计时器值似乎比 13 毫秒的中速动画效果好很多，例如褪色背景图像。
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);
}
};
【讨论】：
人们提到减慢 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' 每隔几毫秒更新一次对象。不幸的是，jQuery 中的间隔默认为“13 毫秒”。那是每秒 76 次更新。对于这样的慢速和中等动画来说，这是非常重要的。
13ms 被硬编码到 jQuery 中。所以你只能在jQuery.js中直接改变这个值。如果你只有缓慢的 clowds，你可以达到 100 毫秒。如果你也有一些更快的动画，你应该把它设置为 50。
您可以更改 setInterval() 的参数；在自定义函数中。 'jQuery.fx.prototype { ... custom: function() { ... } ... }'
【讨论】：
我刚刚观察了 Scriptaculous 下动画的性能，发现了类似的 CPU 峰值：IE 大约为 50%，Firefox 的性能稍好（16-30%）——两者都在 DuoCore PC 上。由于 JQuery 和 Scriptaculous 都是通过更改底层 CSS 来工作的，所以我认为可以肯定地说任何 Javascript 实现在计算上都会很昂贵。
您很可能会被 Flash 卡住。
【讨论】：
动画涉及循环操作，无论如何，这些操作都会真正消耗 CPU。
我不知道用 jQuery 做起来有多容易，但需要做的是动画需要消耗更少的周期。要么你让 ani 更加锯齿（显示不那么流畅），循环需要优化，或者减少 ani 的工作。
40 秒？动画是不是有点长？我认为他们应该比这更直接。
【讨论】：
我认为 jQuery animate() 的工作方式是它使用一个计时器，该计时器定期触发并调用一个更新 DOM 以反映动画状态的函数。通常动画相对较短，它们可能覆盖相当多的屏幕空间，所以我怀疑（没有确认）计时器到期并以相当高的速率重置以生成流畅的动画。由于您的动画需要很长时间，您可以修改 animate 函数，以便可以通过选项设置动画进行的速率。在您的情况下，您只需要每 250 毫秒左右更新一次，因为您大约每秒覆盖大约 3-4 个像素。
【讨论】：