CSS 性能 - 如何评估 - 滚动时浮动按钮大小的动画（转换）（转换比例与高度/宽度）

Question

介绍信息： 我制作了一个固定菜单按钮，用于在使用移动设备时显示导航菜单。对于这个应用程序，我使用 Headroom.js 脚本在向下滚动时使按钮变小，以确保它不会阻塞太多内容。通过添加具有给定更改的类来应用动画/过渡。

在原始方法中，我通过更改父元素的height/width 和子元素的padding 使用CSS（和css 过渡）来更改按钮的大小和外观。

根据不同的网站，我读到的新方法可能/应该会更好，它是使用transform: scale() 更改按钮的大小。请注意，我还通过在此方法中应用translate3d(20px,20px,0) 来稍微移动元素。然而，当使用transform: scale() 方法滚动时，它感觉更流畅一些（虽然可能是安慰剂效应），但使用 chrome 开发工具的时间线给了我看似不确定的结果。

因此，我的一部分问题也是我应该如何评估最佳方法。 Chrome 开发工具中的时间线是最佳选择，还是有更好的方法？我应该根据时间线的哪些元素进行选择？另一件事是，根据您对图像和/或测试的解释以及您的知识，哪种方法表现最好（或理论上应该表现最好）？

您可以在下面看到每种方法的两个时间线示例。 更改高度/宽度和填充（原始方法）：

---

使用transform: scale()改变大小的方法：

你也可以在这里尝试不同的小提琴方法：
链接：Original method changing height/width and padding
链接到新方法：using transform:scale

请忽略一切糟糕的布局；特别是按钮。菜单按钮内的丑陋图像只是为了显示，我自己页面的布局中包含一个图像，并将其考虑到性能考虑。后面的图片也包括在内，因为它是一个网店，有很多可能会影响性能的图片。

在原始方法中进行更改的添加类的 CSS：

.mobile-nav.headroom--unpinned {
    height: 40px;
    width: 40px;
}
.headroom--unpinned .mobile-content{
  padding-top:4px;
}

使用 transform:scale() 添加的类的 CSS：

.mobile-nav.headroom--unpinned {
transform:scale(.5) translate3d(20px,20px,0);
}

总结一下我的问题：
我如何评估哪些方法具有最佳性能，您认为哪种方法性能最好？

最后一点：我知道这些方法是不同的（在原始方法中为不同的事物和更多元素设置动画）但这是我现在更喜欢的 2 个选项。

Answer 1

我相信你没有抓住重点，克里斯：除了 transform 和 opacity 之外，其他属性都不应该被动画化的原因是因为它们不会触发其他任何东西的重绘，即使元素在文档流（因为在 95% 的情况下，您基本上可以单独使用这两个来做任何事情）。

从“hit-on-performance”的角度来看，有两种类型的动画：

• 在动画元素之外的其他元素中触发重绘的元素
• 那些没有。

这就是transform、opacity 或position:relative;left|right|top|left 推荐动画的主要原因。因为它们实际上并没有在流中移动元素，因此在动画之后不会触发对流中每个其他元素的重绘。

现在，如果所述父级定位为绝对位置（我假设是这种情况），无论如何它都不会触发对 DOM 其余部分的重绘，因此该方法与 transform 之间的差异将有是次要的。正如你所说，不确定。理论上，重新绘制两个元素而不是一个元素应该会更慢。

如果您需要测试，制作 10k 个克隆并在所有克隆上触发动画，使用每种方法。

这将是决定性的。

---

如果你真的想min-max这个（就像我一样花费大量时间在几乎不明显的改进上）你会发现很多资源可以推荐：

• 将任何.animate() 替换为.velocity()
• 除了transform 或opacity 之外，从不为任何东西制作动画，尽管 Velocity 声称他们在不影响性能的情况下制作任何东西（我认为充其量是有争议/有争议的） - 但它比 .animate() 有了净改进
• 坚持CSS 转换，如果可能的话（基本上如果你不需要链）
• 使用网络动画 API

个人建议：永远不要指望同步的 CSS 动画，尤其是当您拥有许多动画时。如果您更改选项卡或系统在一段时间内执行了非常耗费资源的操作，那么您的动画将会消失。如果你需要链条，链条。