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:通过简单的无限动画逐渐减慢动画速度 的相关文章

  • Angular JS - 如何验证数字输入中的位数

    我们想要做的是 有一个仅接受 0 24 的输入 对于时间输入应用程序 这些是用户应该能够输入到输入中的值 0 1 2 3 4 5 6 7 8 9 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
  • 找不到 firebase-messaging.js laravel

    大家好 我正在使用 firebase 制作一个用于推送通知的应用程序 这是我在 firebase 中的第一个项目 我遇到的问题是当我运行项目并单击它给我的登录按钮时的连接 已授予通知权限 但在此之后它返回一个错误 如下所示 获取脚本时收到错
  • .getDay() 奇怪的行为[重复]

    这个问题在这里已经有答案了 有一个例子 console log new Date 2013 02 24 getDay 24 gt 0 24 console log new Date 2013 02 25 getDay 25 gt 1 25
  • 无法使用 Node.JS 将 null 值发送到 MySQL 数据库

    我正在尝试发送null使用 Node JS 到我的 MySQL 数据库 con query INSERT INTO Routes routeTrigger VALUES null title test function err result
  • 错误:导航器只能包含“屏幕”组件作为其直接子组件

    我是 React Native 新手 收到此错误 但无法解决它 我正在遵循主要的教程反应导航页面 https reactnavigation org docs screen options resolution 但我无法完成它 我将不胜感激
  • 如何从回调函数中获取值

    我对 javascript 比较陌生 并且面临一些困难 我有两个 java 脚本文件 如下所示 我无法获取变量的值条目标题在 getRss 函数内并将其存储在变量内Rss1 标题 and Rss2 标题 创建一个全局变量并将其分配给条目标题
  • numpy 中用最少内存对上三角元素求和的最快方法

    我需要进行此类求和i
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将
  • JavaScript 将 NULL 转换为 0

    我正在使用 jQuery 来获取元素的高度 但如果该元素不存在 以下代码将返回 NULL height menu li active ul height returns integer or null 这是一种跨浏览器安全的方法 可以使用以
  • 整数与双精度算术性能?

    我正在编写一个 C 类来使用整数执行 2D 可分离卷积 以获得比双对应更好的性能 问题是我没有获得真正的性能提升 这是 X 过滤器代码 对于 int 和 double 情况都有效 foreach pixel int value 0 for
  • 在没有全局变量的情况下对多个事件使用 Promise 回调

    我有一个包含在函数中的承诺 我将使用不同的输入参数多次调用该函数 每次承诺解决时 我都会将解决的值推送到存储数组中 当我所有的调用承诺都得到解决后 我将在其他函数中使用这个存储数组 是否有任何干净的方法可以在不使用 全局 变量的情况下进行设
  • 如何在 ES6 类中使用静态变量?

    我正在尝试在 es6 中使用静态变量 我想声明一个静态变量count in Animal类并增加它 但是 我无法通过声明静态变量static count 0 所以我尝试了另一种方法 class Animal constructor this
  • Google Apps 脚本:如何水平对齐 inlineImage

    我有以下代码 它是一个更大程序的一部分 我正在尝试将图像从我的 Google 驱动器插入到 Google 文档中 并调整其大小并居中 到目前为止 我能够让程序插入图像并调整其大小 但我不知道如何使 inlineImage 居中 我是使用谷歌
  • 如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

    我正在使用一个网络应用程序工作Spring MVC 我试图在提交表单之前显示一个确认对话框Bootbox 但我收到 500 内部服务器错误 这是我的表格
  • 将回调函数与原型函数一起使用

    在执行回调时 我无法弄清楚如何传递对象方法而不是排序 通用原型 方法 function Client this name hello Client prototype apiCall function method params callb
  • 使用 Java 进行 AES 加密并使用 Javascript 进行解密

    我正在制作一个需要基于 Java 的 AES 加密和基于 JavaScript 的解密的应用程序 我使用以下代码作为基本形式进行加密 public class AESencrp private static final String ALG
  • 为什么 foreach 这么慢?

    PHPBench com http www phpbench com 在每个页面加载上运行快速基准测试脚本 在 foreach 测试中 当我加载它时 foreach 的运行时间是第三个示例的 4 到 10 倍 为什么本机语言构造明显比执行逻
  • jQuery 存储类型未定义

    我用了一个jQuery 存储 https ui5 sap com api jQuery sap storage存储数据 oStore jQuery sap storage jQuery sap storage Type local oSto
  • angular-cli:Karma-Webpack 因“没有此类文件或目录”而失败

    我从Tour of Heroes使用标准 Angular systemjs 现在我正在使用angular client它在开发 生产模式下运行顺利 但我无法测试任何东西ng test 以下内容会被吐出 不仅适用于test ts但也为了pol
  • 获取不正确的日期,将时间戳转换为新日期

    我正在尝试将时间戳转换为日期 但得到的日期不正确 我正在开发一个使用 Angular 和 Typescript 的项目 我有这样的时间戳 1451642400 2016年1月1日 和1454320800 2016年2月1日 如果我编码 da

随机推荐