Dart 中的画布性能答案

【问题标题】：Canvas performance in DartDart 中的画布性能
【发布时间】：2015-01-28 20:07:27
【问题描述】：

这个问题与我的框架 VilTAGE (https://github.com/ViliX64/VilTAGE) 有关。它是一个 ASCII 网页游戏框架，可以渲染到 Canvas。问题是，绘制时间是计算时间的两倍。

现在渲染的工作方式是每个 CharNode（一个对象，带有文本字符、颜色等）和 CanvasElement 的 HashMap，它上面绘制了文本。当循环想要绘制一个 CharNode（每秒 15-30 次）时，它会通过 HashMap，找到所需的 CanvasElement 并将其呈现给主 CanvasElement。（见https://github.com/ViliX64/VilTAGE/blob/master/lib/etc/utility.dart）。

单个 CanvasElement 快照很小（通常约为 10x10）。它们是使用 drawImage(..); 绘制的；

问题在于，在具有 70x40 CharNodes 的游戏中，当编译为 JavaScript 时，游戏运行（不出所料）非常慢，甚至更慢。

我是否犯了任何明显的错误，或者您能给我一些提高性能的提示吗？

编辑 1：它在 Firefox 和 IE 上运行最慢。在 Google Chrome 上的性能更好。

【问题讨论】：

您正在循环遍历哈希图，而不是像应该使用的那样直接按键获取。改变这个应该会给你一个小的加速。
我知道，但我需要相同的值。即使我重写了 == 运算符，它也没有返回所需的 CharNode。不过，感谢您的提示。
我已经更新了代码，所以它不会再遍历 hashmap 了。它确实提高了主要在 Firefox 和 IE 上的性能:)
很可能您在覆盖 == 时忘记覆盖 hashCode。
你试过用chrome或IE的分析器看看哪些函数占用CPU时间最多？

标签： html performance canvas dart

【解决方案1】：

如果它像在 javascript 中一样工作，您的问题可能在于您正在缓存 CanvasElement 并且每次调用 drawImage 时都必须从中检索 bitmapData。这是一项非常昂贵的操作。

您可以尝试使用 getImageData 缓存 imageData 并使用 putImageData 绘制它（两者都是 CanvasRenderingContext2D 方法）

【讨论】：

感谢您的提示。我会在 10 分钟内给你结果。
好的，我已经更新了代码，现在我只缓存 ImageData。它确实提高了性能，但只有一点点（平均 2 FPS）。编辑后的代码可以在这里找到：github.com/ViliX64/VilTAGE/blob/master/lib/etc/utility.dart
好吧，看来我错了，很抱歉造成混乱：jsperf.com/canvas-drawimage-vs-putimagedata/3
我认为它确实对速度有一点影响。该测试无法与这种情况进行比较，因为 VilTAGE 正在绘制大量微小的图像。