提高 iPad 上的 CSS3 速度答案

【问题标题】：Improve CSS3 speed on iPad提高 iPad 上的 CSS3 速度
【发布时间】：2013-03-12 00:24:05
【问题描述】：

iOS 总体上倾向于使用 CSS3 过渡、动画、变换等。其中 IMO 是该技术的一些最佳功能。

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

有没有什么方法可以提高 iOS 上 CSS3 过渡、变换、动画等的性能？或者网络应用注定要成为原生应用的塑料翻版？

编辑：这是有问题的代码...

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

只要点击那个链接，你就会看到我放在一起的一个小演示......当在桌面浏览器上观看时，动画很流畅并且可以接受，iOS 上的同一个站点会受到影响......这个是为iPhone 4...

请随意浏览源代码并指出问题...

【问题讨论】：

也许一些例子会很有用，然后人们可能能够指出具体的优化。
CSS3 会很慢，因为它依赖于浏览器进行渲染，而 CSS 并没有那么快。我什至注意到，如果您在单个元素上使用大量框阴影属性，则当您滚动经过它时页面将冻结。 CSS3 不错，但还没有为“黄金时间”做好准备
@akamike - 那里有一个链接，你可以用它来看看我在说什么......在 iOS 上运行那个网站，然后繁荣......悲伤的面孔到处都是...... @Seth - 我很难相信（这并不意味着你错了）CSS3 比 javascript 动画表现更差。桌面上存在差异，在我见过的一些示例中，CSS3 处于领先地位。我确实相信在 iOS 上，设备运行速度低于频率，只有 3D 请求允许时钟放大，从而提高性能......

标签： ios webkit css

【解决方案1】：

3D 转换在 iOS 上是硬件加速的，因此您只需在执行时使用 3D 语法，它的性能非常好 - 至少在 3GS 及更高版本上。

但是您在示例中没有使用变换，而是在位置上使用了过渡，这是完全不同的，是的 - 导致移动设备上的 fps 很糟糕。

相反，您应该使用 -webkit-transform: translate3d(-100%,0,0) （或合适的模拟）。你可以从the example in this page.看到这流畅了多少

【讨论】：

完成，你有一个示例代码的链接......希望它可以帮助你，反过来，我...... :-)
太棒了，感谢您的链接，结果证明它真的很有用...如果我卡住了会再次询问...

【解决方案2】：

您绝对应该使用 -webkit-transform 而不是 -webkit-transition。话虽如此，为了跨浏览器支持和易用性，我肯定会使用像 jQuery Transit 这样的插件，它可以让您轻松地在 iOS 以及 Android 和其他移动设备上创建流畅的、类似原生的过渡和效果.

Example JSFiddle of jQuery Transit in action

代码示例：

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 上对此进行了测试。我喜欢它给人的原生感觉。

【讨论】：