Raphael:通过简单的无限动画逐渐减慢动画速度

2023-12-24

这个问题在本质上与两年前提出的另一个问题类似:为什么 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 上得到验证,因此这不是操作系统问题:)。

有谁知道我的代码或拉斐尔的内部结构可能有什么问题吗?


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

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

再次,不确定这是否是您想要或需要的答案,但我认为这是正确的。 :( 抱歉我无能为力。祝你好运 :)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Raphael:通过简单的无限动画逐渐减慢动画速度 的相关文章

随机推荐