使用css转换提高动画性能

Question

我最近一直在阅读有关优化CSS和JavaScript / jQuery以获得GPU性能的最新信息，特别是在移动设备上，特别是在CSS动画更改对网站性能产生不利影响的情况下。

我已经完成了一些测试，但我无法判断我是否正确优化了我的代码以提高性能。

基本变换动画适用于max-height或position属性

我已经整理了一个简单的codepen来试图展示我的目标以及我想要实现的目标。 http://codepen.io/onebitrocket/pen/jFrtf

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

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

我还看到了几个绘图事件，其中图层根据文档记录。

由于

Answer 1

优化。您正在使用3d转换进行翻译，这很快。当顶盒移动时，链接上的paiting是由于颜色和下划线的变化。盒子的移动发生在GPU上，不应该影响其他任何东西。

但是，动画width或height属性是另一回事。那些是layout属性，因此，当它们发生变化时，页面的布局会发生变化，需要重新绘制。在你的情况下，框后面没有任何内容，但是如果你放了更多元素，当你为框大小设置动画时，它们会上下移动。

CSS中的属性可分为三组：

1. 布局属性（高度，宽度，位置，左，顶部，字体大小，字体系列，边距宽度，边框宽度......）。更改任何这些属性涉及布局，绘画和合成。这些是动画的最差属性。如果可以避免，请不要为它们制作动画。
2. 绘制属性（背景，颜色，边框颜色，......）。这些属性会影响元素的方面。改变它们涉及绘画和合成。比布局属性更具有动画效果（在系统资源中），但是，再次，并不理想。
3. 合成属性（变换，不透明度）。通常，这些属性可以在没有CPU干预的情况下直接在GPU上进行动画处理，因此它们是动画的最快属性。

当然，每个浏览器都不同，它们（特别是Chrome和Firefox）的发展非常迅速，所以它们一直在进行优化。今天慢慢的明天可以很快。可能存在这样的情况：第一组的属性的动画可能与最后一组的属性一样快，但作为一般规则，它不会。