CSS变换性能

Question

我想知道 -webkit-transform: translate(5px, 5px) 和 -webkit-transform: translateX(5px) translateY(5px) 之间的区别是什么？

它们在性能上有区别吗？因为 translateX 也用于 3D 变换。所以我的问题是：计算变形时是否有任何差异？我可以说 translateX 更快，因为它使用了 GPU 吗？它做到了吗？

如何测量性能？

- Fender

Answer 1

不会，但是-webkit-transform: translate3d(5px, 5px, 0)会更快。你提供的两种语法是相同的，我的使用了3D上下文。

- Rich Bradshaw

---

是的，你是正确的。我在一个有许多元素的 iPad 上进行了测试，然后你识别出了差异。但是有没有任何方法来测量时间差异呢？ - Fender

你可以使用检查器来测量Chrome/Safari中的内存使用情况，但不确定如何在设备上执行此操作。 - Rich Bradshaw

好的。顺便说一下，你的答案有一个小错误。它应该是 -webkit-transform: translate3d(5px, 5px, 0)。 - Fender

我以为当我写的时候，我只是复制了你的代码然后进行了编辑，我还以为你一定是对的 :) - Rich Bradshaw