优化-webkit转换性能的技巧？

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-perspective：1000来解决它。

不知道这是如何支持过渡，但在我的情况下，它做到了。