拉斐尔：渐变动画放缓简单的无限循环动画(Raphael: Gradual animation slo

这个问题在本质上这另外一个问题类似，两年前问：为什么拉斐尔的帧速率减缓这个代码？

我以下列方式使用拉斐尔2.1.0在Chromium 25：

<html>
<head>
  <title>Drawfun</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <script src="raphael.js"></script>
  <script>
    var paper = Raphael(10, 50, 320, 200);
    var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity);

    var rect = paper.rect(50, 40, 10, 20);
    rect.attr("fill", "#f00");
    rect.attr("stroke", "#fff");
    rect.animate(anim);
  </script>
</body> 
</html>

最初，矩形旋转顺畅，正如人们所期望的那样。一两分钟后，旋转在约15 FPS的速度运行。五，之后八分钟，动画是在约5 FPS运行。

Chrome的CPU配置文件表明，作为动画变得更加波涛汹涌，脚本中花费的时间越来越少(program) ，并在越来越多的时间repush和eve.listeners 。

在Chrome任务管理器并不表示有内存泄漏，无论是在JS内存池或Chrome的，但它揭示出的页面随着时间的推移会消耗更多的CPU。

运行页面时，在最近版本的Firefox中，动画变得波涛汹涌的多，更加迅速。这些结果已经证实在Linux和Windows，所以它不是一个操作系统的问题:)。

没有人有任何深入了解什么可能是错误的，要么是我的代码或拉斐尔的内部？

好吧，我知道这是不完全的，任何人想听到的（并且是一个值得商榷的虎头蛇尾）的答案，但是从拉斐尔的样子，上述意见的阅读，我不禁想，这是一个垃圾收集的问题，而且是跨大家的浏览器不同的结果的原因。从快速浏览一下拉斐尔源，它看起来像相当多瓦尔的声明或动画帧，在每帧的基础的过程中实现的。我知道，至少在Chrome的V8引擎，每一个变种是一个可追踪的方法中声明，换上堆一个事实，在帧率降低延迟只会进一步表明，垃圾收集器踢成高模式，以腾出大块声明瓦尔不再使用。我敢打赌很多钱，如果你是一个很多拉斐尔脚本声明的跃迁到更高的范围（甚至全球，喘气〜！），特别是动画序列中，你会在找到一个大大改善帧速率剧本的过程中。

我就遇到了这个问题上的适应的WebGL的自定义实现，基本上我是让WebGL的命令，而无需启用WebGL的工作。管道我建的光栅有一个非常类似的问题，因为这，基本上它提请帧开始在68fps，但测试结束后，将下降到13fps或更低，并在98％的处理器使用。但直到我清理创建新的内存分配出来的管线范围的每一个申报（并没有具有可变查找做一些更深入研究，加速技巧），我终于能跟上并产生写得很好光栅化，可以在同一时间泵有关的像素到屏幕的3-5MB / s，而保持50-60fps率。

同样，不知道这是你想要或需要的答案，但我认为这是正确的。 :(对不起，我忍不住比了。祝你好运:)