移动设备上的CSS3性能

Question

我们一直在使用iPhone（3G + 4）上的CSS3进行测试，并且出现了一些性能问题。

我们得到了一张Webapp，显示的是个人资料图片+额外信息。

我们有一个箱（默认情况下，我们隐藏的90％，箱）：

border: 1px solid #aaa; 
font-size: 11px; 
text-shadow: 0 1px 0 rgba(0,0,0,.75); 
box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-webkit-box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-moz-box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-moz-border-radius: 0 10px 0 0; 
-webkit-border-radius: 0 10px 0 0; 
border-radius: 0 10px 0 0; 

我们有3个图标与下方的标签：

background: rgba(0,0,0,.5); 
padding: 3px; 
font-weight: bold; 
text-shadow: 0 1px 0 #000; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 

现在，如果我们有动画（让它移动到喜g Y position position te te）te box the the the the animation re，，，，

我们可以做些什么来使动画流畅？

PS。在iPhone 4S是运行退出不错（因为更好的CPU）

Answer 1

编辑：我做了这个答案，假设你用CSS3过渡动画。如果你不是，而且你可以，你可能期望提高性能......这是值得一试的。

这里的问题似乎是webkit必须重新绘制两个非常重的箱子阴影。这看起来并不是什么大事，但如果你先去掉了插入框阴影，我想你会看到令人惊讶的性能跳跃。

我已经在我的android设备（基于Webkit的浏览器）上经历了boggy滚动，并进行了测试以确定问题所在。文字阴影在UI类型设置中有些不相关。渐变也相当不重要。一旦我点击了box-shadow，我注意到了一个几乎线性的渐进效果，因为我逐个像素地移除了模糊半径。

例如，6px半径可能需要80ms才能在大div上呈现。如果我把它降低到3px，渲染时间接近40ms。 2px，大约20ms。

所以你可能想要阻止盒子阴影，如果可能的话只使用图像，否则只是使用较小的阴影。一旦您达到webkit可以在低端设备上至少重绘20次UI的时间，那么您可能就没有问题了。

看起来很明显。由于没有选择渲染质量的选项（例如），所以除了缩小范围之外，您无法真正优化这个功能......对于移动设备，您真正可以做的就是根据您的限制阻止效果并优化您的艺术作品。