Question

我正在使用webkit-transform：translate3d以及一些其他一些属性在iPhone的移动应用上非常广泛，因为它的硬件加速了。大约98％的功能到位，性能非常好。我知道不要一次做太多。

我成功地以非常优秀的原生方式模拟滑动。我现在注意到的是，当我添加最后2％的功能时，我看到一些图像重绘问题在刷卡时被动画化了。在您浏览所有4个图像并加载后，性能再次完美平滑。但是，当隐藏和显示此部分时，会发生同样的事情。

我假设发生的事情是内部缓冲区被击中，每次都必须重新加载。

因此，在这背景下，一般的问题是其他开发人员为-webkit-transform进行了哪些性能优化？我不一定询问我的具体情况，而是人们根据个人需求寻求更广泛的优化？

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

Answer 1

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

最简单的方法是添加：

transform: translate3d(0,0,0);

使用相应元素的css的相应前缀，然后通过使用2d或3d变换将其设置为正常动画。

Answer 2

这可能听起来有点奇怪，但我有类似的问题，我通过使用 -webkit-perspective：1000 来解决它。

不知道这是如何有利于过渡的，但在我的情况下确实如此。