画布框架性能

Question

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

我非常惊讶这三个库的表现有如此大的不同。因此，我想问一下这个测试是否反映了 Kinetic.js、Fabric.js 和 Easel.js 的实际性能。

看起来前两个库很慢（至少在我的电脑上）。

- ppoliani

---

我的测试结果是，fabric（60/60fps）、easel（55/60fps）和kineticJS（20/60fps）。你们的平台目标是什么？只有桌面端吗？ - Jarrod

我正在针对移动和桌面平台。 - ppoliani

对于移动设备（iPhone5，6.1.3），Easel是迄今为止最快的（约39FPS），其次是Fabric（约17FPS），而Kinetic则很差（约5FPS）。希望这有所帮助。 - Jarrod

这个Fabric.js演示在你的电脑上也很慢吗？http://fabricjs.com/particles/我在Mac OS X上的Chrome 31中始终可以达到接近60fps的水平。 - kangax

Answer 1

在我的系统上，fabric.js 也相当快，但它不能与鼠标交互。我正在使用 EaselJS 进行开发，并且非常满意，主要原因是其 API 与 AS3 非常接近——所以如果您之前使用过 Flash 进行开发，您可能会考虑它。

另一方面，这些框架中的任何一个都可能在性能方面适合您的需求。我猜测您的项目不会是一个简单的 300x300 的盒子，有 1000 个点，而对于任何这些框架来说，最多处理 100 个精灵应该都可以很好地完成。当您的画布变得更大（例如全屏），情况就变得有趣了，因为此时渲染更多地依赖于硬件和浏览器本地渲染操作，而不是画布框架。据我所知，所有这些框架都会在“tick”上重新渲染整个画布（但我并不100%确定）。

- olsn

Answer 2

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

如果您正在构建游戏并且不介意花一些钱购买支持解决方案，则可以考虑使用impactjs - 我个人没有使用过它，但我从我的开发者朋友那里听到了好消息。

您可以在Kinetic中非常快速地构建简单的应用程序 - 它的API非常简单直观，但如果性能至关重要，则我可能会避免使用它。

如果您需要大量互动，并且想要一个使用户可以轻松操作屏幕上对象的库 - 那么fabricjs是一个出色的工具，并且具有许多内置功能，可以快速开发此类应用程序，其性能也相对较好。

- cyberpantz