提高iPad上CSS3的速度

Question

iOS在CSS3转换、动画、变形等方面总体上表现不佳，而这些技术中一些是最好的特性。

我听说可以通过添加一些随机的3D变换等方式来欺骗iOS初始化其硬件加速。所以我将一个随机div进行了变换并放在屏幕上（甚至没有隐藏它），但使用体验仍然很卡顿...

是否有任何方法可以提高iOS上CSS3转换、变形、动画等的性能？或者Web应用程序注定成为原生应用程序的塑料仿制品？

编辑：以下是有问题的代码...

http://www.abhi.my/sl/html/

只需访问该链接，您就会看到我制作的一个小演示...当在桌面浏览器上查看时，动画是流畅和可接受的，但在iOS上查看同样的网站时却很卡顿...这个网站是为iPhone 4而设计的...

请随意查看源代码并指出问题...

- Abhishek

---

也许提供一些示例会更有帮助，这样人们就可以指出具体的优化方法。 - akamike

CSS3会比较慢，因为它依赖于浏览器进行渲染，而CSS并不是很快。我甚至注意到，如果在单个元素上使用了大量的盒子阴影属性，当您滚动过去时，页面会冻结。CSS3很好，但它还没有准备好迎接“主流时间”。 - Seth

@akamike - 那里有一个链接，你可以用它来看看我在说什么... 在iOS上运行该网站，然后嘭... 周围都是悲伤的表情... @Seth - 我很难相信（这并不意味着你错了），CSS3的性能比JavaScript动画差。在桌面上，这种差异是存在的，CSS3在我看过的一些例子中处于领先地位。我确实相信，在iOS上，设备运行在降频状态下，只有3D请求才允许时钟缩放，从而提高性能... - Abhishek

Answer 1

iOS上的3D变换得到了硬件加速，因此您只需要在进行任何3D操作时使用3D语法，它就能够良好地执行 - 至少在3GS及以上设备上。

但是，您在示例中没有使用变换，而是在位置上使用转换，这是完全不同的，而且会导致移动设备上 fps 过低。

相反，您应该使用 -webkit-transform: translate3d(-100%,0,0) （或类似的模拟） 。您可以从此页面中的示例清楚地看到效果更加流畅。

- Michael Mullany

---

完成了，你有一个样例代码的链接...希望它能对你有所帮助，进而也对我有所帮助... :-) - Abhishek

太棒了，谢谢你提供的链接，它真的很有用...如果再遇到问题会再次询问... - Abhishek

Answer 2

你应该绝对使用-webkit-transform而不是-webkit-transition。话虽如此，为了跨浏览器支持和易用性，我肯定会选择像jQuery Transit这样的插件，它允许您轻松地在iOS以及Android和其他移动设备上创建平滑的本机式过渡和效果。

jQuery Transit在实际操作中的示例JSFiddle

代码示例：

HTML：

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript：

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

有人已经为你做了大部分的工作。我不喜欢折腾CSS3动画，而这个插件非常出色地完成了它的工作。我已经在iPad、iPod Touch、iPhone和Android上进行了测试。我喜欢它所带来的本地化体验。

- Gaff