使用css transfrorm提高动画性能

Question

我最近读过很多关于为GPU性能优化CSS和JavaScript/jQuery的文章，特别是在移动设备上，特别是在CSS动画变化对网站性能有不利影响的情况下。

我做了一些测试，只是无法判断我的代码是否经过了正确的性能优化。

基本转换动画用于max-height或position属性。

我已经整理了一个简单的代码，试图展示我在做什么和我想要实现什么。http://codepen.io/onebitrocket/pen/jFrtf

我已经检查了chrome的性能时间表，但我不确定结果是否与优化的CSS和jQuery预期的一样。

如果使用JavaScript和classList.toggle而不是演示中的jQuery，jQuery是否会阻止CSS动画的优化，我会看到更好的性能吗？

我还看到了几个画图事件，图层将其作为文档的根。

谢谢

Answer 1

它被优化了。你正在使用3d转换来进行翻译，这是快速的。当顶部框移动时，链接上的暂停是由于颜色和下划线的变化造成的。盒子的移动发生在GPU上，不应该影响其他任何东西。

然而，动画width或height属性是另一回事。这些都是layout属性，因此，当它们更改时，页面的布局会发生变化，需要重新绘制。在你的例子中，盒子后面没有任何东西，但是如果你放了更多的元素，当你将盒子大小动画的时候，它们会上下移动。

CSS中的属性可分为三组：

1. 布局属性(高度、宽度、位置、左、顶、字体大小、字体系列、边距宽度、边框宽度.).更改这些属性中的任何一个都需要布局、绘画和合成。这些都是更糟糕的动画属性。如果你能避免的话，就不要给它们动画。
2. 油漆特性(背景，颜色，边框颜色，.)。这些属性影响元素的方面。改变它们需要绘画和合成。Cheapier (在系统资源中)比布局属性更生动，但是，同样，并不理想。
3. 合成属性(变换、不透明度)。通常，这些属性可以在不需要CPU干预的情况下被动画化，直接在GPU上，因此它们是动画最快的属性。

当然，每个浏览器都是不同的，它们(特别是Chrome和Firefox)发展很快，所以它们一直在被优化。今天慢，明天快。在某些情况下，第一个组的属性的动画速度可能与最后一个组中的一个一样快，但作为一般规则，它不会。