画布框架性能答案

【问题标题】：Canvas frameworks performance画布框架性能
【发布时间】：2013-03-15 12:42:06
【问题描述】：

我想为即将开始的项目选择画布框架。因此，我开始了一项研究，以找到适合我需要的那个。在搜索各种库的优缺点时，我偶然发现了这个性能测试 (http://jsdo.it/djankey/test-kineticjs)。

我对这三个库的不同表现印象深刻。所以我想问一下这个测试是否反映了 Kinetic.js、Fabric.js 和 Easel.js 展示的实际性能。

前两个好像很慢（至少在我的电脑上）。

【问题讨论】：

我的结果是织物 (60/60fps)、画架 (55/60fps) 然后是 kineticJS (20/60fps)。你的目标是什么平台？仅限桌面？
我的目标是移动和桌面平台。
对于移动设备（iPhone5、6.1.3），Easel 是迄今为止最快的（~39FPS），其次是 Fabric（~17FPS），然后是 Kinetic，后者很糟糕（~5FPS）。希望有所帮助
这个 Fabric.js 演示在您的计算机上是否也很慢？ fabricjs.com/particles 我在 Mac OS X 上的 Chrome 31 中始终接近 60fps。

标签： html html5-canvas kineticjs fabricjs easeljs

【解决方案1】：

在我的系统上，fabric.js 也非常快，但是它没有与我的鼠标交互。我正在使用 EaselJS 进行开发，我对此非常满意，主要原因是它的 API 非常接近 AS3 - 所以如果您之前使用过 Flash 开发，您可能需要考虑它。

另一方面，这些框架中的任何一个都可能在性能方面满足您的需求。我猜你的项目不会是一个简单的 300x300 框，有 1000 个点，我想说任何这些框架都应该很好地处理多达 100 个精灵。当你的画布变得更大（例如全屏）时，它会变得很有趣，因为那时渲染更多地依赖于硬件和浏览器原生渲染操作而不是画布框架。并且 afaik 所有这些框架都会在“滴答”上重新渲染完整的画布（但我对此不是 100% 确定）。

【讨论】：

【解决方案2】：

这取决于您正在构建的项目类型。正如上面提到的 olsn，如果您熟悉 ActionScript 和/或您正在构建具有大量移动精灵的游戏需要 CPU 性能，那么 Easel.js 绝对是您提到的三个框架中的最佳选择。如果您想与 CreateJS 套件中的其他库集成，Easel 也是一个明智的选择。

如果您正在构建游戏并且不介意在受支持的解决方案上投入一些资金，那么您可能需要研究 Impactjs - 我没有亲自使用过它，但我从我的开发者朋友那里听说了一些好消息。

您可以在 Kinetic 中非常快速地构建简单的应用程序 - 它的 API 非常简单明了，但如果性能是关键 - 那么我可能会回避它。

如果您需要大量的交互性，并且想要一个让用户可以轻松地在屏幕上操作对象的库 - 那么 fabricjs 是一个开箱即用的好工具，并且具有许多内置功能，可以开发这样的应用程序走的很快，性能也比较好。

【讨论】：