优化-webkit-transform性能的提示？

Question

我在iPhone的一个移动应用上广泛使用了webkit-transform: translate3d和其他一些属性，因为它的硬件加速了。有了大约98%的功能，性能是很好的。我知道不要一次做太多的事情。

我以一种非常优秀的、原生的方式成功地模拟了滑动。我现在注意到的是，当我添加最后2%的功能时，我在中看到了一些图像重绘问题，这些问题是在滑动时进行动画处理的。在你扫过所有4张图片并加载后，性能就会再一次完美流畅。然而，当这个部分被隐藏和显示时，同样的事情也会发生。

我假设正在发生的情况是，有一个内部缓冲区正在被命中，并且它每次都必须重新加载。

因此，在这样的背景下，一般的问题是，其他开发人员为webkit-transform进行了哪些类型的性能优化？我并不是在问我的具体情况，而是问人们针对自己的个人需求做了哪些更广泛的优化？

希望如果这个问题得到一些答案，它可以作为其他人在未来提出相同问题的资源。

Answer 1

这是一件众所周知的事情，但确保您转换的元素在可能的情况下使用3d转换对硬件加速转换的设备(目前为iOS)有很大帮助。

最简单的方法是添加：

transform: translate3d(0,0,0);

在有问题的元素的css上加上适当的前缀，然后像往常一样使用2d或3d变换对其进行动画处理。

Answer 2

这听起来可能有点奇怪，但我遇到了类似的问题，我通过使用-webkit-透视: 1000解决了这个问题。

我不知道这是如何有利于转换的，但在我的例子中是这样的。