javascript - EaselJS:为什么缓存会使我的渲染速度变慢？

Question

我正在尝试提高 Canvas 上的性能，因为每个 stage.update() 上都会重新绘制所有内容(多个区域)，这就是它的工作原理。我只想绘制/添加一个区域。我可以让它工作，但是由于更新，所有以前的区域都被删除了。我发现缓存可能会提高性能，但实际上会减慢渲染速度。

示例代码:

self.areaMask = new createjs.Shape();
self.areaMask.graphics.beginFill("#000").drawRect(0, 0, 50, 50);
self.areaMask.cache(0, 0, 50, 50);

奇怪的是，当我启用此缓存时，它实际上使渲染速度变慢。只有当我将可选的第四个 scale 参数减少到 0.1 时，性能才会稍微好一些。

我想了解这是怎么可能的，我可能做错了什么？

还有其他更好的方法来获得所需的行为吗？ (仅绘制/添加指定区域，不重绘所有区域)

Answer 1

缓存将改善大多数浏览器的性能，前提是:

1. 浏览器可以将内容放到GPU上。如果不能，则使用 CPU 来绘制图像，这可能会比较慢。大多数浏览器在大多数情况下都能正常工作，但有时您会看到相反的效果。例如，EaselJS cache demo有时在 Safari 中表现较差，尽管在其他地方表现得更好。您在哪些浏览器/设备上进行测试？

2. 缓存做得正确。如果您单独缓存大量小东西，那么您就会在后台创建大量小图像。在这些情况下，更好的方法是使用 SpriteSheetBuilder 之类的东西，因为减少纹理数量可以提高 GPU 正常运行的机会。

3. 您的缓存只完成一次，而不是多次。如果你每帧都缓存一些东西(比如在一个刻度中)，那么缓存将不会有效。这是因为它必须将每帧的矢量/组内容绘制到屏幕外 Canvas 中，然后将该 Canvas 绘制到主舞台。这比仅仅绘制向量需要更多的工作。

EaselJS 目前不支持绘制舞台的特定区域。有一些技术，例如更新离屏缓存，然后将其绘制到舞台上 - 但仅此而已。

我很想看看您的代码正在运行，并且也许能够告诉您为什么它不起作用。