CSS Transitions 与 JS 动画包的性能对比

IT技术 javascript css animation
2021-03-14 12:57:34

我想知道使用 CSS Transitions 与使用各种 JavaScript 动画库的性能有什么不同吗？（script.aculo.us，scripty2，jsAnim，MooTools，$fx，等等）。

我在Safari和Chrome 中尝试了各种测试，但我实际上没有看到任何区别。我认为 CSS Transitions 应该是硬件加速的。

更新：

我已经尝试Effect.Fade在 5 个不同的 DIV（每个 DIV 包含一个带有一些线条的画布）上使用 Scriptaculous' 。使用 CSS 转换做完全相同的事情，我发现性能上绝对没有区别。使用一个 DIV/Canvas 时两者都非常流畅，但是当我一次执行 2 个以上时，两者都非常慢。

我已经在Safari 4、5 (OSX)、Google Chrome 5和FireFox 3.7pre 中尝试过这个。全面相同的结果。

在回答 UpHelix 的回答时，您不仅限于hover等。您可以通过更改任何transitionable样式来触发转换。例如，在 JavaScript 中设置元素的不透明度（之后，您已经为该元素指定了transitionPropery和transitionDuration）。

4个回答

是的，有区别，CSS 快得多。可能很难看到，除非您让许多人同时运行或运行得越多。CSS 动画是有限的。在大多数情况下，他们实际上只在:hover活动结束后工作。使用JavaScript，你可以在任何情况下执行的动画：click，mouseover，mousemove，mouseout，keyup，keydown，等。

在我看来，jQuery 是 2010 年 JavaScript 动画的最佳选择。请参阅jQuery Demos

“查询是迄今为止最好的 JavaScript 动画”。你的这个说法是基于什么？
2021-04-22 12:57:34
@Mircea 我认为人们认为该声明有效的唯一原因是它写于 2010 年。从那时起，情况发生了很大变化。如果有的话，jQuery 动画库是迄今为止最慢的（比其他 JavaScript 动画包慢 20 倍）。
2021-04-26 12:57:34
“Jquery 是迄今为止最好的 js 动画”——恐怕需要引用
2021-05-02 12:57:34
@Swordfish0321 不，它没有。您只需使用 JS 来触发 CSS 动画。然后使用 CSS Transition 完成动画本身。
2021-05-11 12:57:34
您可以使用 JS 事件处理程序来触发 CSS 动画（例如，通过向元素添加类名，或直接设置相关的样式属性），从而获得两全其美的效果。
2021-05-14 12:57:34

添加到 Uphelix 的（正确）答案：JavaScript 是一种解释性语言，浏览器的 JS 引擎必须在运行时解析和执行每条指令（我知道存在 JS 编译器，例如 V8（在 Chrome 中使用），但是原理不变）。

另一方面，浏览器可以本地实现 CSS 转换，例如在 C/C++ 或其他东西中。此代码将被编译为机器语言。

CSS 转换是否经过硬件加速，取决于浏览器使用的技术、浏览器运行的平台等。

这听起来很有道理，但完全相反的答案（每秒运行 60 次小 JS 代码的开销可以忽略不计）也是合理的。解决它的唯一方法是找到与用户拥有的硬件相当的硬件并运行实验。根据问题，德绍的实验发现了与这个答案相反的答案——两种替代方案在实践中表现相同。
2021-04-19 12:57:34

您会注意到移动浏览器（iPhone、Android 等）上的差异。

CSS 动画具有由浏览器处理的优势。可以进行快速计算和优化。在我看来，网络动画性能应该从“整体”​​的角度来看待。毕竟一个动画，就FPS而言，不可能比浏览器刷新还快。

实际性能水平由整体 UI 性能给出。JS 和 CSS 动画看起来很相似。然而，CSS 动画胜出，因为它们不会阻塞 UI 线程。

Stoyan Stefanov 编写并演示了如何将 CSS 动画从 UI 线程中取出：http : //www.phpied.com/css-animations-off-the-ui-thread/

其它你可能感兴趣的问题
上一篇窗口变量名 下一篇在 Javascript 中，如何“清除”背面（历史记录 -1）？