Mobile Safari 的 jQuery 动画性能答案

【问题标题】：jQuery animations performance with Mobile SafariMobile Safari 的 jQuery 动画性能
【发布时间】：2011-10-25 18:02:21
【问题描述】：

我最近刚开始使用 jQTouch 为 iPhone 开发一个网站，并且有以下代码：

<li class="title" onclick="showDesc('desc1');">Post Title</li>
   <li id="desc1" class="shortDesc">
      Short description of post content
      <a href="#viewPost">Read</a> 
   </li>

<script type="text/css>
function showDesc(id){
    $("#"+id).slideToggle();
}
</script>

“desc1”隐藏在 CSS 中，并在用户单击帖子标题时显示（我只是在制作模型，因此传递给 showDesc() 的参数目前是硬编码的）

我的问题是，在 iPhone 上观看时，动画非常缓慢且卡顿。它在桌面浏览器（显然！）和 iPhone 模拟器中运行良好，它只是在设备本身上（运行 iOS 4.3.2）。

我的问题是：这是我的代码有问题还是 jQuery 没有针对 Mobile Safari 进行优化？

我正在将 jQTouch 用于移动框架，但文档只讨论了通过动画的方式进行页面转换，所以我不确定是否有办法做到这一点。

或者，这个任务是否更适合 CSS3 动画？

提前致谢！

【问题讨论】：

标签： javascript jquery html mobile-safari jqtouch

【解决方案1】：

是的，强烈建议使用 CSS3 过渡。它们是硬件加速的，而 Javascript 动画则不是。您可能希望为 slideToggle 动画转换不透明度以及宽度/高度参数。这很讨厌，但它会给你带来很棒的性能

【讨论】：

【解决方案2】：

您应该在移动设备上使用 CSS3 动画，因为“CSS 渲染引擎”有更多机会优化性能。尤其是像过渡变换（不会导致重新布局和重新渲染纹理的东西）之类的东西——它们在硬件上映射得很好。

【讨论】：

【解决方案3】：

事实证明，手机本身的很多渲染问题都是由应用于隐藏的webkit-box-shadow属性引起的

虽然 CSS3 是这个任务的更“原生”选项，但 jQuery 的 slideToggle() 函数似乎工作得很好。

我真的应该对 CSS 进行更详细的概述，但现在根据您的推荐了解了更多有关 CSS3 动画的知识，所以值得！

【讨论】：