性能：CSS3动画 vs. HTML5画布

Question

我正在开发一个Web应用程序（仅在Chrome 19+中运行），目前使用CSS3过渡效果构建。更具体地说，我使用Jquery Transit将CSS3动画与Jquery本身一起触发。这样做的原因是一些动画需要持续数秒钟，而Jquery animate 不够平滑，但Transit是一个很好的解决方案。 Jquery Transit 运行得非常好，但我想知道HTML5 Canvas是否能够更加流畅地渲染动画？如果可以，考虑到我目前正在使用AJAX和基于百分比位置的DIV，是否值得追求？如果有人知道CSS3动画在Chrome中与HTML5 Canvas性能相比如何，并且愿意给出他们的意见，我将非常感激！

- Zakman411

---

这应该会帮助你做出决定。https://dev59.com/TW445IYBdhLWcg3wdqOO - Anirudh Ramanathan

此外，HTML5画布在IE9+上的性能将会更好。硬件加速集成到新版本的IE中非常出色。 - Anirudh Ramanathan

@DarkXphenomenon：非常有趣的测试！由于我的应用程序只会在Chrome 19+上显示，因此似乎CSS3动画的表现与Canvas相当（如果不是更好），至少在版本8中是这样？ - Zakman411

是的，你应该选择CSS3。 - Anirudh Ramanathan

除了性能外，您还需要考虑canvas在特定情况下是否适合。通过CSS和HTML可以轻松实现的内容，在canvas中可能会变得过于复杂。当然，如果您想要火爆的爆炸或其他canvas更适合的效果，最好使用混合（即仅在效果上使用canvas，并将其他所有内容保留在CSS中）。 - Stecman

Answer 1

CSS3会让你更轻松，而且未来可以轻松更改，它还可以在不支持画布的系统上优雅地工作。

如果你正在使用文本，尽可能使用CSS。画布会破坏你的应用程序的可访问性，并禁止用户使用插入符或突出显示文本或使用文本转语音。

如果你只是想做一个有趣的滑动按钮之类的东西，那么你也应该使用CSS，因为它可能会更容易实现和维护。重新制作CSS比费力地编写（可能很复杂的）JavaScript要容易得多。

我无法诚实地告诉你画布渲染是否更平滑。画布的一个优点是，你可以将物体动画到看起来更大的尺寸（同时保持画布大小），而无需引起DOM重新布局。但在大多数现代系统上，这并不是一个问题。

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

- Simon Sarris

---

是的，我明白你的意思。本质上，我们正在尝试在最便宜的硬件上获得最高的应用程序性能，但Canvas似乎对于这种实现来说更麻烦，特别是因为你提到了破坏可访问性。我们使用了很多文本，所以这确实是一个不能接受的问题。感谢您的建议！ - Zakman411

看起来是一个不错的答案，但最终你承认你不知道canvas是否更好，所以你并没有回答问题，实际上 :) - Sebastien

2012年，性能领域的变化速度太快了，无法给出“肯定”的答案。如果你关心这个问题，就必须进行基准测试。 - Simon Sarris

Answer 2

我认为您在使用画布时可能会遇到的问题是它基于位图。因此，在页面最初呈现后进行缩放将成为一个问题。此外，换行可能会很麻烦。编写您网站内容的人可能会发现插入换行符很具有挑战性，因为在canvas、svg或vml中没有换行符这样的东西。实际上，您需要预先计算换行符。使用raphael.js的"\n"可以工作，但并不理想。此外，您无法使用选择器来定位您svg图形中的各个部分。也许您可以使用canvas，但Canvas可能会有一堆相同的问题。

在图像方面，如果进行缩放，则图像将变得模糊，并且处理画布图像调整大小的库较少。这可能会在未来发生改变，但仍然需要处理。我建议您只使用divs/css3和jquery回退来支持旧版浏览器。

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

- Parris

---

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