使用画布线动画降低性能

Question

我正在使用 requestAnimationFrame 来为网站中的某些行设置动画。问题是这个动画显着增加了处理器的使用，动画也不顺畅。

有时超过70％的CPU使用率。

我不知道是动画还是行的重新定位

function animateline() {
  reqAnimFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;

  reqAnimFrame(animateline);

  x += speed;

  if (x <= 0 || x >= 475) {
    speed = -speed;
}
  reposition();
}

完整代码在http://jsfiddle.net/a4cNp/46/

页面的全屏版本 - ＆gt; http://jsfiddle.net/a4cNp/46/show/light/

提前致谢。

添加了Firefox Profiler图像。也许找到问题是有用的，但我仍然不知道如何解决它。

Answer 1

正如@GameAlchemist所说，将您的polyfill放在代码顶部附近而不是动画内部。您的动画循环每秒被调用多次，因此最大限度地减少了循环必须完成的工作量。

有一点观察：你做的jQuery选择太多了。

首先，缓存要重新定位的jQuery对象及其维度：

在代码顶部附近执行此操作：

var $area1=$("#area1");
var $area2=$("#area2");
var $area3=$("#area3");
...
var area1Width=$area1.width();
var area1Height=$area1.height();
...

然后在经常调用的代码（如重新定位）上使用这些缓存值：

function reposition(){

    $area2.css("left", area1Width+40);

    ....