性能：CSS3动画与HTML5画布 [英] Performance: CSS3 animations vs. HTML5 Canvas
问题描述
我正在开发一个目前使用CSS3转换构建的webapp（将仅在Chrome 19+中运行）。更具体地说，我使用 Jquery Transit 来使用Jquery本身触发CSS3动画。这里的推理是，一些动画被抽出几秒钟，jquery animate 不够流畅，但Transit对此很好解决。 Jquery Transit工作得很好，但我很好奇HTML5 Canvas是否会让事情更加流畅？如果是这样，是否值得追求，因为我目前使用AJAX和基于百分比的DIV位置？如果有人知道如何将CSS3动画与HTML5 Canvas在Chrome中的性能进行比较，并且愿意提供他们的输入，我将非常感激！
CSS3将为您带来更少的麻烦，您可以在将来轻松地进行更改，并且它可以在不支持canvas的系统上正常工作。
如果你正在使用文本，你应该坚持使用CSS，如果你可以逃避它。 Canvas会破坏应用程序的可访问性，并且不允许用户使用克拉或突出显示的文本或使用文本转换语音。
如果您只是制作一个有趣的滑动按钮或某物那么你也应该使用CSS，因为它可能会更容易实现和维护。重做CSS比翻阅更容易（可能很复杂）JavaScript。
我不能诚实地告诉你画布效果是否会更平滑。画布的一个优点是，您可以将事物动画化为看起来更大的尺寸（同时保持画布的大小相同），而无需重新布局DOM。在大多数现代系统中，这真的不是一个问题。
此外，如果已经完成 CSS3，您是否确实遇到性能问题？如果没有人抱怨表现，为什么还要为画布重写呢？如果到目前为止您还没有遇到任何真正的性能问题，为什么要重新创建您的应用程序？
I'm working on a webapp (will only be running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transit to fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animate wasn'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 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.
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.
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.
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.
Furthermore, if its already done with 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动画与HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
