javascript - 性能 : CSS3 animations vs. HTML5 Canvas

标签 javascript jquery html css canvas

我正在开发一个当前使用 CSS3 转换构建的网络应用程序(将在 Chrome 19+ 中运行)。更具体地说,我正在使用 Jquery Transit用 Jquery 本身触发 CSS3 动画。这里的原因是一些动画被绘制了几秒钟,jquery animate 不够流畅,但 Transit 是一个很好的解决方案。 Jquery Transit 工作得很好,但我很好奇 HTML5 Canvas 是否会让事情变得更流畅?如果是这样,考虑到我目前正在为 DIV 使用 AJAX 和基于百分比的位置这一事实,它是否值得追求?如果这里有人知道 CSS3 动画与 HTML5 Canvas 在 Chrome 中的性能比较并且愿意提供他们的意见,我将不胜感激!

最佳答案

CSS3 将减少您的麻烦,您可以在未来轻松更改它,并且它可以在不支持 Canvas 的系统上优雅地工作。

如果您使用的是文本,那么如果可以避免的话,您绝对应该坚持使用 CSS。 Canvas 破坏了您的应用程序的可访问性,并禁止用户使用 carat 或突出显示文本或使用文本到语音。

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

我无法诚实地告诉您 Canvas 渲染是否会更平滑。 canvas 的一个优点是您可以将事物动画化到看似更大的尺寸(同时保持 canvas 相同尺寸),而不必导致 DOM 重新布局。在大多数现代系统上,这确实不是一个问题。

此外,如果它已经用 CSS3 完成,您是否真的遇到了性能问题?如果还没有人提示性能,为什么还要为 canvas 重写它呢?如果到目前为止您没有遇到任何真正的性能问题,为什么要重新设计您的应用?

关于javascript - 性能 : CSS3 animations vs. HTML5 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11182478/

相关文章:

javascript - 使用 php 与 Ajax 实现响应式 UI

html - Float H2 - 需要将文本推到下方

html - 在 bootstrap 表中显示悬停行的字形

javascript - jQuery 添加 html.ActionLink

javascript - IntersectionObserver Polyfill 不会在 IE11 中加载

javascript - 仅在 div 内处理鼠标和触摸事件

javascript - 如何在 javascript 中给出 !important

javascript - 我想在显示输出之前显示确认对话框

php - 无法使用 jQuery 获取复选框的值

javascript - 如何检索 html 文件内容并插入到另一个 html 文件?