#性能

vicky.yu

你可能注意到上面显示的动画使用了 transforms 之类的东西，并应用了诸如 perspective 之类的奇怪的 property——为什么它们是这样实现的，而不是仅仅使用 margin 和 top 等？

我们可以通过对性能的了解，在 web 上创建极其流畅的动画。我们希望尽可能对元素动画进行硬件加速，并使用不触发重绘的 property。我们来介绍一下如何实现这个目标。

#Transform 和 Opacity
我们可以通过工具，例如 CSS Triggers 来查看哪些属性会在动画时触发重绘。在工具中，查看 transform 的相关内容，你将看到：

非常好的是，更改 transform 不会触发任何几何形状变化或绘制。这意味着该操作可能是由合成器线程在 GPU 的帮助下执行。

opacity 属性的行为也类似。因此，他们是在 web 上做元素移动的理想选择。

#硬件加速
诸如 perspective、backface-visibility 和 transform:translateZ(x) 等 property 将让浏览器知道你需要硬件加速。

如果要对一个元素进行硬件加速，可以应用以下任何一个 property (并不是需要全部，任意一个就可以)：