如何衡量 CSS 过渡和动画的性能答案

【问题标题】：How to measure the performance of CSS transitions and animations如何衡量 CSS 过渡和动画的性能
【发布时间】：2013-02-14 02:31:01
【问题描述】：

我想比较一下 jQuery 的动画功能和纯 CSS3 过渡的性能。我发现有一个requestAnimationFrame API来衡量性能，但它似乎只能与canvas元素一起使用？

有没有比较好的方法来测试绝对定位相对于 CSS3 和 canvas 的性能？

stats.js 有用且值得信赖吗？你有什么经验？

我构建了这个jsPerf test。不幸的是 jQuery.on 方法没有被执行。 :(

【问题讨论】：

知道你想用这个实现什么会很有帮助；它是一个简单的 CSS 过渡，还是您正在开发一个需要画布元素的更复杂的动画？
我只想使用一个简单的过渡。我的目标是比较这两种技术。

标签： html5-canvas css-transitions performance-testing requestanimationframe jsperf

【解决方案1】：

我认为过渡/动画规则应该在 CSS 中，因为它们是一个表现元素，而 JavaScript 是为行为设计的。出于这个原因，我会坚持使用 CSS 转换，让 JavaScript 来做表单验证/ajax/等。但这并不意味着 JavaScript 是一种不适合用于动画的技术，Web 的本质是您可以以多种方式使用技术，因为它们之间有很多重叠。

我为您提供了一些我认为您可能会觉得有用的链接； Paul Irish/Chris Coyier's discussion over translate，animations in CSS transitions vs Javascript 上的视频以及 jQuery 和 CSS 之间的 link showing the framerate comparison。 在第三个链接中可以看到，CSS 绝对比 JavaScript 更快更流畅；我猜是因为它是硬件加速的。

几个类似结论的stackoverflow问题：what's faster? CSS3 transitions or jQuery animations? :: Performance of CSS Transitions vs. JS animation packages

您说得对，requestAnimationFrame 函数仅适用于 canvas 元素。如果您打算将 CSS 转换与画布输出同步，我建议您使用它，因为它就是为此而构建的，而不是使用 setInterval。

【讨论】：

jQuery 的动画与一般的 JavaScript 不同。 GSAP 等其他库可能比 jQuery 快很多。