javascript 性能：CSS3 动画与 HTML5 Canvas
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11182478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Performance: CSS3 animations vs. HTML5 Canvas
提问by Zakman411
I'm working on a webapp (will onlybe running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transitto fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animatewasn't smooth enough, but Transit is a great fix for this. Jquery Transit is working quite well but I'm curious to whether HTML5 Canvas will render things even smoother? And if so, is it worth pursuing, given the fact that I'm using AJAX and percentage-based locations for DIVs currently? If anyone here knows how CSS3 Animations compare to HTML5 Canvas performance in Chrome and would be willing to give their input I would greatly appreciate it!
我正在开发一个当前使用 CSS3 转换构建的 web 应用程序（只能在 Chrome 19+ 中运行）。更具体地说，我使用Jquery Transit通过 Jquery 本身触发 CSS3 动画。这里的原因是一些动画被绘制了几秒钟，jquery animate不够流畅，但 Transit 是一个很好的解决方案。Jquery Transit 工作得很好，但我很好奇 HTML5 Canvas 是否能让事情变得更流畅？如果是这样，考虑到我目前正在为 DIV 使用 AJAX 和基于百分比的位置，是否值得追求？如果这里有人知道 CSS3 动画与 Chrome 中的 HTML5 Canvas 性能相比如何，并且愿意提供他们的意见，我将不胜感激！
采纳答案by Simon Sarris
CSS3 will give you fewer headaches and you can change it easily in the future, and it will work gracefully on systems that aren't canvas-enabled.
CSS3 会给您带来更少的麻烦，并且您将来可以轻松更改它，并且它将在不支持画布的系统上正常工作。
If you're using text, you should absolutely stick with CSS if you can get away with it. Canvas ruins the accessibility of your app and disallows users from using a carat or highlighting text or using text to speech.
如果您正在使用文本，那么您应该绝对坚持使用 CSS，如果您能摆脱它的话。Canvas 会破坏您的应用程序的可访问性，并禁止用户使用克拉或突出显示文本或使用文本转语音。
If you're just making a funny sliding button or something then you should also just use CSS as it will probably be much easier to implement and maintain. Redoing CSS is easier than slogging over (what can be complex) JavaScript.
如果你只是制作一个有趣的滑动按钮或其他东西，那么你也应该只使用 CSS，因为它可能更容易实现和维护。重做 CSS 比重做（可能很复杂）JavaScript 更容易。
I can't honestly tell you if canvas renderings will be smoother. One plus of the canvas is that you can animate things to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. On most modern systems this really isn't an issue thought.
我不能诚实地告诉你画布渲染是否会更平滑。画布的一个优点是您可以将事物设置为看起来更大的尺寸（同时保持画布的大小相同），而不必导致 DOM 重新布局。在大多数现代系统上，这真的不是问题。
Furthermore, if its already donewith CSS3, are you actually having performance problems? If nobody has complained about performance yet, why bother rewriting it for canvas? If you aren't encountering any real performance problems so far, why reinvent your app?
此外，如果它已经用 CSS3完成了，你真的有性能问题吗？如果还没有人抱怨性能，为什么还要为画布重写它呢？如果到目前为止您没有遇到任何真正的性能问题，为什么要重新设计您的应用程序？
回答by Parris
The problem I think you might run into with canvas is that it is bitmap based. Therefore scaling up and down after the page is initially rendered will be a problem. Furthermore, line breaks will be painful to deal with potentially. The people who write your site's content might find it challenging to insert line breaks because there is no such thing as a line break using canvas, svg, or vml. In fact you need to pre-compute line breaks. "\n" using raphael.js works, but it isn't great. Furthermore you can't use selectors to target various portions if you in your svg graphics. You may be able to using canvas, maybe.... Canvas probably has a buncha of the same gotchas.
我认为您在使用画布时可能会遇到的问题是它是基于位图的。因此，在最初呈现页面后放大和缩小将是一个问题。此外，换行符可能很难处理。编写站点内容的人可能会发现插入换行符具有挑战性，因为没有使用 canvas、svg 或 vml 的换行符之类的东西。事实上，您需要预先计算换行符。"\n" 使用 raphael.js 工作，但它不是很好。此外，如果您在 svg 图形中，则不能使用选择器来定位各个部分。您也许可以使用画布，也许……画布可能有一堆相同的问题。
On the image front you will have blurry images if it scales and there are less libraries out there that deal with image resizing for canvas. This may change in the future, but it will still be an ordeal to deal with. I'd just stick with your divs/css3 with jquery fallbacks for older browsers.
在图像方面，如果缩放图像，您会看到模糊的图像，并且处理画布图像大小的库较少。这在未来可能会改变，但仍将是一个考验。我只是坚持你的 divs/css3 和旧浏览器的 jquery 回退。
From a purely performance perspective, checkout the first comment on your question. It has some nice benchmarks.
从纯粹的性能角度来看，请查看对您的问题的第一条评论。它有一些不错的基准。
