拉斐尔：逐步放缓的动画用简单的无限动画 [英] Raphael: Gradual animation slowdown with simple infinite animation
问题描述
这个问题是精神这个问题的其他类似的，要求在两年前：<一href=\"http://stackoverflow.com/questions/2733613/why-does-raphaels-framerate-slow-down-on-this-$c$c\">Why不拉斐尔的帧率这个code放缓？
This question is similar in spirit to this other question, asked two years ago: Why does Raphael's framerate slow down on this code?
我以下列方式使用拉斐尔2.1.0在Chromium 25：
I'm using Raphael 2.1.0 in Chromium 25 in the following way:
<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运行
Initially, the rectangle spins smoothly, as one would expect. After a minute or two, the rotation is running at ~15 FPS. After five or eight minutes, the animation is running at ~5 FPS.
Chrome的CPU配置文件表明，随着动画变得更加波涛汹涌，该脚本在花费的时间越来越少（程序），并在越来越多的时间 repush 和 eve.listeners 。
Chrome CPU profiles indicate that as the animation becomes more choppy, the script is spending less and less time in (program) and more and more time in repush and eve.listeners.
在Chrome的任务管理器并不表示有内存泄漏，无论是在JS内存池或在Chrome的，但显示该页面随着时间的推移会消耗更多的CPU。
The Chrome task manager doesn't indicate that there's a memory leak, either in the JS memory pool or in Chrome's, but does reveal that the page consumes more and more CPU over time.
运行页。当在最近版本的Firefox中，动画变得波涛汹涌的多，更迅速。这些结果已经证实在Linux和Windows，所以它不是一个操作系统的问题。）
When running that page in a recent version of Firefox, the animation becomes choppy much, much more quickly. These results have been verified on Linux and Windows, so it's not an OS issue :).
没有人有任何深入了解什么可能是错误的或者我的code或拉斐尔的内部？
Does anyone have any insight into what might be wrong with either my code or Raphael's internals?
推荐答案
好吧，我知道这是不完全的，任何人都希望听到的答案（并且是一个值得商榷的虎头蛇尾），但是从拉斐尔的样子，和评论上面的阅读中，我不禁想，这是一个垃圾收集的问题，而且是跨大家的浏览器不同的结果的原因。从快速浏览过拉斐尔源，它看起来像相当多瓦尔的声明或动画帧，在每帧的基础的过程中实施。我知道，至少在Chrome的V8引擎，每一个变种是一个可跟踪方法中声明，并把堆的事实，在帧率降低延迟只会进一步表明，垃圾收集器踢成高模式，以腾出大块声明瓦尔不再使用。我敢打赌很多钱，如果你要很多拉斐尔脚本声明进入一个更高的范围（甚至全球，喘气〜！），特别是动画序列时，你会在找到一个大大改善帧速率脚本的过程。
Okay, I know this isn't exactly the answer that anyone wants to hear (and is a debatable cop-out), but from the look of Raphael, and the reading of the comments above, I can't help but think that this is a garbage collection issue, and is the reason for the varying results across everyone's browsers. From a quick glance over the Raphael source, it looks like quite a bit of vars are declared or implemented in the process of animating a frame, on a per frame basis. I know for a fact that at least in Chrome's V8 engine, each var is declared in a trackable method and put on the heap, the delay in the framerate reduction only further indicates that the garbage collector is kicking into high mode to free up chunks of declared vars that are no longer in use. I would bet good money that if you were to move a lot of the declarations in the Raphael script into a higher scope (maybe even global, gasp~!), specifically during the animation sequences you will find a very much improved frame-rate over the course of the script.
我就遇到了这个问题，在一个适应的WebGL的自定义实现，基本上我是让WebGL的命令，未启用的WebGL工作。管道我建的光栅有一个非常类似的问题，因为这，基本上将利用帧开始68fps，但在测试结束后，将下降到13fps或更低，在98％的处理器使用。但直到我清理创建新的内存分配出来的管道范围内的每一个申报（并做具有可变查找做一些更深入研究，加速技巧），我终于能跟上并产生写得很好光栅化，可以在同一时间对泵像素屏幕3-5MB / s，而保持50-60fps率。
I ran into this problem on a custom implementation of an adaptation to webgl, basically i was making webgl commands work without webgl enabled. The rasterizer of the pipeline I built had a very similiar problem as this, basically it would draw the frames starting at 68fps, but by the end of the test, would be down to 13fps or lower, and at 98% processor use. It wasn't until I cleaned up every single declaration that created new memory allocations out of the pipeline scope (and did a few more well researched speed up tricks having to do with variable lookups) that I was finally able to keep up and produce a well written rasterizer that could pump about 3-5MB/s of pixels to the screen at a time while keeping a 50-60fps rate.
再次不知道这是你想要或需要的答案，但我认为这是正确的。 :(很抱歉我不能帮助比任何更多的好运气。）
Again, not sure if this is the answer you want or need, but I think it is the correct one. :( Sorry I couldn't help any more than that. Good luck :)
这篇关于拉斐尔：逐步放缓的动画用简单的无限动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
