使用 css 变换提高动画性能

Question

我最近阅读了很多关于优化 CSS 和 JavaScript/jQuery 以提高 GPU 性能的内容，尤其是在移动设备上，尤其是在 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. 绘制属性（背景、颜色、边框颜色...）。这些属性会影响元素的外观。更改它们涉及绘画和合成。动画比布局属性更便宜（在系统资源中），但同样不理想。
3. 合成属性（变换、不透明度）。通常，这些属性可以在没有 CPU 干预的情况下直接在 GPU 上进行动画处理，因此它们是动画处理速度最快的属性。

当然，每个浏览器都是不同的，它们（尤其是 Chrome 和 Firefox）发展非常迅速，因此它们一直在优化。今天慢的，明天可以快。在某些情况下，为第一组的属性设置动画可能与最后一组的属性一样快，但一般情况下不会。