11

这个问题与两年前提出的另一个问题在本质上相似：为什么 Raphael 的帧速率在这段代码上会变慢？

我通过以下方式在 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)在.repusheve.listeners

Chrome 任务管理器并没有表明存在内存泄漏，无论是在 JS 内存池中还是在 Chrome 中，但确实显示该页面随着时间的推移消耗越来越多的 CPU。

在最新版本的 Firefox 中运行该页面时，动画会变得更加不稳定，而且速度更快。这些结果已在 Linux 和 Windows 上得到验证，因此这不是操作系统问题 :)。

有没有人知道我的代码或 Raphael 的内部可能有什么问题？

4

1 回答 1

2

好吧，我知道这不是任何人都想听到的答案（并且是一个有争议的逃避），但从拉斐尔的表情和对上面评论的阅读来看，我不禁认为这是一个垃圾收集问题，也是每个人的浏览器结果不同的原因。快速浏览一下 Raphael 源代码，看起来在每帧动画的过程中声明或实现了相当多的变量。我知道至少在 Chrome 的 V8 引擎中，每个 var 都在可跟踪的方法中声明并放在堆上，帧速率降低的延迟仅进一步表明垃圾收集器正在进入高模式以释放块声明不再使用的变量。

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

同样，不确定这是否是您想要或需要的答案，但我认为这是正确的答案。:( 对不起，我无能为力。祝你好运 :)

于 2013-03-23T01:40:28.597 回答