Question

这个问题与两年前提出的另一个问题的精神相似：Why does Raphael's 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和eve.listeners的花费的时间越来越少。

Chrome任务管理器并未表明JS内存池或Chrome中存在内存泄漏，但确实显示该页面随着时间消耗了越来越多的CPU。

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

有没有人能够深入了解我的代码或拉斐尔内部的错误？

Answer 1

好吧，我知道这不是任何人都想听到的答案（并且是一个有争议的警察），但从拉斐尔的表情，以及阅读上述评论，我忍不住认为这是垃圾收集问题，并且是每个浏览器的结果不同的原因。通过快速浏览Raphael源代码，看起来在每帧的动画帧过程中声明或实现了相当多的变量。我知道至少在Chrome的V8引擎中，每个var都以可跟踪的方式声明并放在堆上，帧速率降低的延迟仅进一步表明垃圾收集器正在进入高模式以释放大块的声明的vars不再使用。我敢打赌，如果你要将Raphael脚本中的大量声明移到更高的范围（甚至可能是全局的，喘气〜！），特别是在动画序列期间你会发现帧速率大大提高了。脚本的过程。

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

同样，不确定这是否是您想要或需要的答案，但我认为这是正确的答案。 :(抱歉，我不能帮助。祝你好运:)。

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

1 个答案: