CSS3 Translate3D 和 iPhone 硬件加速答案

【问题标题】：CSS3 Translate3D and iPhone hardware accelerationCSS3 Translate3D 和 iPhone 硬件加速
【发布时间】：2011-07-10 23:41:06
【问题描述】：

网络上有几个references 是关于使用 CSS3 translate3d 指令在某些移动设备（iPhone 等）上强制硬件加速的。然而，虽然其中大部分都非常详细地介绍了 translate3d，但我发现没有一个能准确解释如何使用它。因此，如果我正确实施它，我会发现自己在徘徊，因为我的动画仍然有点卡顿。我的问题是：

1：你是将它应用到你将要制作动画的元素（动态创建的）（滑入等）还是只将它全局应用到 body 元素？

2：在动态创建元素时以编程方式将样式规则应用于元素是否更好，或者创建css规则（例如类）并将规则应用于元素更好（是否有一些发生的预编译形式或性能提升？）

3：我可以利用任何其他技巧来获得如丝般流畅的用户体验吗？是快速获胜还是复杂的解决方法？

谢谢

【问题讨论】：

标签： css mobile web-applications hardware-acceleration

【解决方案1】：

-webkit-transform: translate3d(0, 0, 0);

如果将此 css 属性应用于任何元素，它将强制设备使用硬件加速。我已经应用它来解决 Ipad2 上的渲染问题，比如“空白”

我说过应用这个对于设备来说真的很重，所以，你可以让你的应用程序崩溃。我的建议;如果您将其应用于少数元素，请使用此技巧。

http://davidwalsh.name/translate3d

【讨论】：

【解决方案2】：

1) 老实说，我不知道：P 我只会对元素应用过渡。

2) 更改类比应用样式规则更快。来源：http://www.quirksmode.org/dom/classchange.html 此外，您将风格和行为分开。最新版本的 Desktop Opera 的行为也与其他浏览器一样。不过我对移动浏览器一无所知。

3) 对于技术优化检查 yslow 和 pagespeed firefox 插件。这里有大部分推荐的汇编：http://developer.yahoo.com/performance/rules.html

【讨论】：