EaselJS：为什么缓存会使我的渲染变慢？
EaselJS: Why does caching make my rendering slower?
我正在尝试提高我们 canvas 的性能，因为所有内容（多个区域）都在每个 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 时，性能才会稍微好一些。
我想了解这是怎么可能的，我可能做错了什么？
是否有其他更好的方法来获得所需的行为？ （只绘制/添加指定区域，不重绘所有区域）
缓存将改进大多数浏览器的功能，前提是：
浏览器可以把内容放在GPU上。如果不能，则使用 CPU 绘制图像，这可能会更慢。大多数浏览器在大多数情况下都可以正常工作，但有时您会看到相反的效果。例如，EaselJS cache demo 有时在 Safari 中表现较差，尽管在其他地方表现更好。 browsers/devices 你在测试什么？
缓存做对了。如果您单独缓存大量小东西，那么您将在后台创建大量小图像。更好的方法是在这些情况下使用 SpriteSheetBuilder 之类的东西，因为减少纹理数量可以提高 GPU 发挥出色的机会。
你的缓存只做一次，不是很多。如果你每帧都缓存一些东西（比如在一个 tick 中），那么缓存将不会有效。这是因为它必须将每一帧的 vector/group 内容绘制到离屏 canvas 中，然后将 canvas 绘制到主舞台。这比绘制矢量要多得多。
EaselJS 目前不支持绘制舞台的特定区域。有一些技术，例如更新屏幕外缓存，并将其绘制到舞台上一次 - 但仅此而已。
我很想看看你的代码在运行中，也许能告诉你为什么它不起作用。
我正在尝试提高我们 canvas 的性能，因为所有内容（多个区域）都在每个 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 时，性能才会稍微好一些。
我想了解这是怎么可能的，我可能做错了什么？
是否有其他更好的方法来获得所需的行为？ （只绘制/添加指定区域，不重绘所有区域）
缓存将改进大多数浏览器的功能，前提是：
浏览器可以把内容放在GPU上。如果不能，则使用 CPU 绘制图像，这可能会更慢。大多数浏览器在大多数情况下都可以正常工作，但有时您会看到相反的效果。例如，EaselJS cache demo 有时在 Safari 中表现较差，尽管在其他地方表现更好。 browsers/devices 你在测试什么？
缓存做对了。如果您单独缓存大量小东西，那么您将在后台创建大量小图像。更好的方法是在这些情况下使用 SpriteSheetBuilder 之类的东西，因为减少纹理数量可以提高 GPU 发挥出色的机会。
你的缓存只做一次，不是很多。如果你每帧都缓存一些东西（比如在一个 tick 中），那么缓存将不会有效。这是因为它必须将每一帧的 vector/group 内容绘制到离屏 canvas 中，然后将 canvas 绘制到主舞台。这比绘制矢量要多得多。
EaselJS 目前不支持绘制舞台的特定区域。有一些技术，例如更新屏幕外缓存，并将其绘制到舞台上一次 - 但仅此而已。
我很想看看你的代码在运行中，也许能告诉你为什么它不起作用。