CSS 过渡与 JS 动画包的性能

Posted 2023-02-22

技术标签:

【中文标题】CSS 过渡与 JS 动画包的性能【英文标题】：Performance of CSS Transitions vs. JS animation packages 【发布时间】：2011-03-01 07:05:28 【问题描述】：

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

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

更新：

我尝试在 5 个不同的 DIV 上使用 Scriptaculous'Effect.Fade（每个 DIV 都包含一个带有一些线条的画布）。使用 CSS 转换做同样的事情，我看不出性能上有什么不同。使用一个 DIV/Canvas 时，两者都非常流畅，但当我一次执行 2 个以上时，两者都非常慢。

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

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

【问题讨论】：

需要考虑的一件事（未来 3 年） - 也许您的计算机功能强大，可以轻松运行两者。正如你所说，“两者都非常顺利”。也许尝试一些更边缘的测试，或者在速度较慢的计算机上进行测试。但还有另一面 - 跨浏览器支持。我有旧网站不能在 FF 中运行，但可以在所有其他浏览器中运行。我认为这是一个严重的问题。 【参考方案1】：

是的，有一点不同，CSS 要快得多。在您同时运行许多人或他们做的更多之前，可能很难看到。不过 CSS 动画是有限的。在大多数情况下，它们实际上只对:hover 事件起作用。使用 JavaScript，您可以在任何情况下执行动画：click、mouseover、mousemove、mouseout、keyup、keydown 等。

在我看来，jQuery 是 2010 年最好的 JavaScript 动画。见jQuery Demos

【讨论】：

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

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

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

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

【讨论】：

【参考方案3】：

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

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

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

【讨论】：

这听起来很合理，但完全相反的答案（每秒运行 60 次 JS 代码的开销可以忽略不计）也是合理的。解决它的唯一方法是找到与用户拥有的硬件相当的硬件并运行实验。根据这个问题，desau 的实验发现了与这个答案相反的结果——两种方案在实践中的表现是一样的。【参考方案4】：

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

【讨论】：