我正在使用画布实现HTML5游戏。现在我正在考虑使用绝对位置的HTML元素制作所有文本叠加层，如工具提示，speechbubbles，infowindows等。所以我可以使用CSS3提供的许多效果和转换。混合画布和CSS3元素
但我不确定表现。这些叠加必须很快被添加和删除（就像MMORPG一样，所以会有很多语音泡泡等等）。
可能有2个方面的性能问题：
DOM遍历添加/删除。也许缓存可以帮助？
HTML和CSS3本身。
另一种选择是管理画布本身中的这些元素，并在每一帧中绘制它们。但是，也许我会因为额外的代码，超时时间以及我不得不添加的内容而再次出现性能损失，以实现类似CSS3中的效果。无论如何，都需要遍历一些数据结构。
任何建议，意见，经验？
在此先感谢。
考虑只使用上述两种技术中的一种。也许你可以在手机或平板电脑上发布该应用程序。我认为在这些设备上会遇到同时处理的问题。另一件事：如果你留在画布上，就不会担心兼容性。它不是一个技术，而是一个发人深省的答案。
是的，我同意这是最好的，至少在可维护性和可移植性方面。 – Ixx 2012-09-13 16:05:37
解决此问题的一种方法是在画布对象后面使用“动态”图像映射。然后你可以根据需要使用dom。请注意，您需要将画布上的点击传递给图像地图。
在HTML5游戏中为UI元素使用DOM的单一最佳原因是事件处理。
如果您在画布上绘制所有内容，则需要编写自己的逻辑来处理点击，并确定点击的内容，如果您有多层界面，很快会变得非常复杂。
使用DOM元素（特别是使用像jQuery这样的库时），这很简单，您可以用最少的工作量创建丰富的交互式UI。
我能想到的唯一不足就是你可能会遇到浏览器不一致的情况，特别是在使用CSS3的时候，但是jQuery会帮助你解决这个问题。
我想另外一个缺点是，一旦你沿着DOM路线走下去，你的游戏总是要成为一个浏览器游戏，而如果它是100％的画布，总会有将代码移植到另一种语言的可能性并使之成为本地人，但我想这对于一些人来说只会是一个负面影响。
通过缓存对“重要”元素的引用可以减少DOM遍历时间;为了这个目的，我经常保留someUniqueId => DOMElement的散列。该id可以作为data-*属性存储在您的元素上以帮助实现此方案。至于混合CSS3与画布，我一直在想这个策略（+1）。转换（画布坐标 - >屏幕坐标）必须很好地抽象出来，否则你最终会陷入混乱，试图找出将常规元素放置在画布上的位置。 – 2012-04-08 17:36:44