性能：CSS3 动画 vs. HTML5 Canvas答案

【问题标题】：Performance: CSS3 animations vs. HTML5 Canvas性能：CSS3 动画 vs. HTML5 Canvas
【发布时间】：2012-06-26 07:17:26
【问题描述】：

我正在开发一个当前使用 CSS3 过渡构建的 web 应用（将仅在 Chrome 19+ 中运行）。更具体地说，我使用Jquery Transit 来使用Jquery 本身触发CSS3 动画。这里的原因是一些动画被画了几秒钟，jquery animate 不够流畅，但 Transit 是一个很好的解决方案。 Jquery Transit 运行良好，但我很好奇 HTML5 Canvas 是否会使事情变得更流畅？如果是这样，考虑到我目前正在为 DIV 使用 AJAX 和基于百分比的位置这一事实，是否值得追求？如果这里有人知道 CSS3 动画与 HTML5 Canvas 在 Chrome 中的性能相比如何并愿意提供他们的意见，我将不胜感激！

【问题讨论】：

这应该可以帮助您做出决定。 stackoverflow.com/questions/4842872/…
另外，HTML5 画布性能在 IE9+ 上会更好。将硬件加速集成到新版本的 IE 中令人印象深刻。
@DarkXphenomenon：非常有趣的测试！由于我的应用程序只会在 Chrome 19+ 上显示，因此 CSS3 动画的性能似乎与 Canvas 一样好（如果不是更好的话），至少从版本 8 开始？
是的。您可能应该使用 CSS3。
除了性能之外，您还可以考虑画布是否适合这种情况。使用 CSS 和 HTML 可以轻松完成的工作，使用 canvas 可能变得过于复杂。当然，如果你想要火热的爆炸效果或其他更适合 canvas 的东西，混合型会是最好的（即，只使用 canvas 来实现效果，并将其他所有内容保留在 CSS 中）

标签： javascript jquery html css canvas

【解决方案1】：

CSS3 将减少您的麻烦，并且您可以在将来轻松更改它，并且它可以在不支持画布的系统上正常工作。

如果您使用的是文本，那么您绝对应该坚持使用 CSS，如果可以的话。 Canvas 会破坏您应用的可访问性，并禁止用户使用克拉或突出显示文本或使用文本转语音。

如果您只是制作一个有趣的滑动按钮或其他东西，那么您也应该只使用 CSS，因为它可能更容易实现和维护。重做 CSS 比费力（可能很复杂）JavaScript 更容易。

我不能诚实地告诉你画布渲染是否会更平滑。画布的一个优点是您可以将事物设置为看似更大的尺寸（同时保持画布尺寸相同），而无需重新布局 DOM。在大多数现代系统上，这确实不是问题。

此外，如果它已经用 CSS3 完成，你真的有性能问题吗？如果还没有人抱怨过性能，为什么还要为画布重写它呢？如果到目前为止您没有遇到任何真正的性能问题，为什么要重新发明您的应用程序？

【讨论】：

是的，我明白你的意思。本质上，我们试图在最便宜的硬件上获得最高性能来运行应用程序，但是对于这种类型的实现来说，Canvas 似乎比它的价值更麻烦——尤其是因为你提到破坏了可访问性。我们使用了大量的文本，所以这确实会破坏交易。感谢您的意见！
看起来是一个很好的答案，但最后你承认你不知道画布是否会更好所以你实际上没有回答这个问题:)
2012 年的性能格局变化太快，无法给出“肯定”的答案。如果您愿意，必须进行基准测试。

【解决方案2】：

我认为画布可能会遇到的问题是它是基于位图的。因此，在页面初始呈现后放大和缩小将是一个问题。此外，换行可能会很痛苦。编写您网站内容的人可能会发现插入换行符具有挑战性，因为没有使用 canvas、svg 或 vml 的换行符之类的东西。实际上，您需要预先计算换行符。 "\n" 使用 raphael.js 有效，但效果不佳。此外，如果您在 svg 图形中，则不能使用选择器来定位各个部分。你也许可以使用画布，也许……画布可能有很多相同的陷阱。

在图像前面，如果缩放图像，您将看到模糊的图像，并且处理画布图像大小调整的库较少。这在未来可能会改变，但仍将是一个考验。对于旧版浏览器，我会坚持使用带有 jquery 后备的 divs/css3。

从纯粹的性能角度来看，请查看对您问题的第一条评论。它有一些不错的基准。

【讨论】：

我明白了——是的，换行符在我们的实现中尤其重要，因为我们使用了大量的文本。据我了解，使用大量样式文本（或动态 HTML 内容）意味着坚持使用 CSS3 制作动画，而画布似乎更适用于绘制形状和游戏等？