iphone - 在移动设备上提高 CSS3 转换性能的 "golden rules"是什么？

Question

我在我的应用程序中使用了一些非常简单的 CSS3 转换，如下例所示，我尝试在 div 容器中从左向右滑动:

<div id="navi">
    <form>
        <input>...</input>
    </form>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

<div id="bg">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
</div>

#navi{
 z-index:2;
 position:fixed;
 -webkit-transform:translateZ(0);
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -webkit-transition:left 0.5s;
 left:0;
 top:0;
 bottom:0;
 width:95%;
 overflow-x:hidden;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}

.slidein{
 left:500px;
}

要滑入/滑出我做的 div:

$("#navi").toggleClass("slidein");

在我的 iPhone 4s 上，这种过渡非常流畅。在 iPhone 4 上性能非常糟糕。

我可以做些什么来提高性能？是否有任何“黄金法则”或最佳做法？

目前我只知道:

• 使用-webkit-transform:translateZ(0)触发硬件加速
• 使用-webkit-transform-style: preserve-3d;
• 使用-webkit-backface-visibility: hidden;
• 避免渐变
• 避免box-shadow

我的主要问题之一是 #navi 里面有很多元素像<ul>许多<li>元素。在下#navi还有一个包含相当多大图像的另一个 div 元素。这些似乎也会降低性能(至少当我对它们使用 display:none 时性能会提高，但这不是一个选项，因为它们需要在幻灯片转换期间可见)。

Answer 1

尝试为 transform 而不是 left 属性设置动画，即使在旧的 iOS 设备上它也能非常流畅地工作。

#navi {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#navi.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}

fiddle :http://jsfiddle.net/x8zQY/2/

2017/01 更新:请阅读这篇关于动画和 GPU 渲染、分析和优化技术的精彩文章 https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/