Javascript 拉斐尔：简单无限动画的渐进动画减速

这个问题在精神上与两年前提出的另一个问题类似：

我在Chromium 25中以以下方式使用Raphael 2.1.0：

拉文
* {
保证金：0；
填充：0；
}
var paper=Raphael（10,50,320,200）；
var anim=Raphael.animation（{transform:“R360”}，500）。重复（无限）；
var rect=纸张rect（50,40,10,20）；
矩形属性（“填充”，“#f00”）；
矩形属性（“笔划”、“fff”）；
直接动画（动画）；

最初，矩形会平滑旋转，正如人们所期望的那样。一两分钟后，旋转速度约为15 FPS。五到八分钟后，动画以~5 FPS的速度运行

Chrome CPU配置文件表明，随着动画变得越来越不稳定，脚本在

（程序）

中花费的时间越来越少，在

重新推送

和

eve.listeners中花费的时间越来越多

Chrome任务管理器并没有指出JS内存池或Chrome内存池中存在内存泄漏，但确实揭示了页面随着时间的推移会消耗越来越多的CPU

在最新版本的Firefox中运行该页面时，动画会变得非常、非常迅速。这些结果已经在Linux和Windows上得到验证，因此这不是操作系统的问题：）

有人知道我的代码或Raphael的内部结构可能有什么问题吗？
好吧，我知道这并不是每个人都想听到的答案（这是一个有争议的借口），但从Raphael的表情和上面的评论来看，我忍不住认为这是一个垃圾收集问题，这也是导致每个浏览器的结果各不相同的原因。通过快速浏览Raphael源代码，可以看出，在为一帧制作动画的过程中，有相当多的变量是在每帧的基础上声明或实现的。我知道一个事实，至少在Chrome的V8引擎中，每个var都是在一个可跟踪的方法中声明并放在堆上的，帧速率降低的延迟只是进一步表明垃圾收集器正在进入高模式，以释放已声明的不再使用的var块。我敢打赌，如果你将Raphael脚本中的许多声明移动到更高的范围（甚至可能是全局的，gasp~！），特别是在动画序列中，你会发现在脚本过程中，帧速率有了很大的提高

我在适应webgl的自定义实现中遇到了这个问题，基本上我是在不启用webgl的情况下使webgl命令工作的。我构建的管道光栅化器有一个非常类似的问题，基本上它将以68fps开始绘制帧，但到测试结束时，将降至13fps或更低，并且处理器使用率为98%。直到我清理了在管道作用域之外创建新内存分配的每个声明（并做了一些更深入研究的与变量查找有关的加速技巧）我最终能够保持并产生一个写得很好的光栅化器，它可以一次向屏幕输出大约3-5MB/s的像素，同时保持50-60fps的速率

同样，我也不确定这是否是你想要或需要的答案，但我认为这是正确的答案（很抱歉，我无能为力。祝你好运：）
使用Chrome 25.0.1364.97 m版在JSFIDLE中运行代码10分钟后，我没有注意到帧速率的降低，你是如何测量帧速率的？你能试试这个吗？我在Kenneth的机器上看到了这个，帧速率的降低是戏剧性的，一点也不微妙。十分钟后，它看起来大约每秒2帧。在让JSFIDLE运行一段时间后，我的帧速率明显下降。我们已经在Mac上的Chrome、Windows、Linux和Linux上的Firefox上进行了测试。它已经出现在我们测试过的每个浏览器中。Chrome 26.0.1410.12开发版。我怀疑如果该选项卡是后台选项卡而不是前台选项卡，则性能下降会不太明显。让它在后台选项卡中运行20分钟不会导致性能下降。由于Rafael可能正在使用requestAnimationFrame，我想这并不奇怪。谢谢你花时间回答这个问题，伙计。：）这种影响在内存非常宝贵的移动浏览器上更为明显。你是对的，拉斐尔需要一些重构来改进这一点。