EaselJS：为什么缓存会使我的渲染变慢？

Question

我正在尝试提高画布上的性能，因为所有内容（多个区域）都在每个 stage.update() 上重新绘制，这就是它的工作原理。我只想绘制/添加一个区域。我可以让它工作，但是由于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. 您的缓存只完成一次，而不是很多。如果你每帧缓存一些东西（比如在一个滴答声中），那么缓存将不会有效。这是因为它必须将每帧的矢量/组内容绘制到离屏画布中，然后将该画布绘制到主舞台。这不仅仅是绘制矢量。

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

我很想看看你的代码在运行中，并且可能会告诉你为什么它不工作。