这个问题在本质上与两年前提出的另一个问题类似:为什么 Raphael 的帧速率在这段代码上变慢了? https://stackoverflow.com/questions/2733613/why-does-raphaels-framerate-slow-down-on-this-code
我通过以下方式在 Chromium 25 中使用 Raphael 2.1.0:
<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
and eve.listeners
.
Chrome 任务管理器并没有表明存在内存泄漏,无论是在 JS 内存池中还是在 Chrome 中,但确实表明该页面随着时间的推移消耗了越来越多的 CPU。
当在最新版本的 Firefox 中运行该页面时,动画变得不稳定得更快。这些结果已在 Linux 和 Windows 上得到验证,因此这不是操作系统问题:)。
有谁知道我的代码或拉斐尔的内部结构可能有什么问题吗?