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;

现在，如果我们动画（让它移动到更高的Y位置）te框，动画实际上很慢，甚至不是平滑的。

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

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

Answer 1

编辑：假设您正在使用CSS3过渡动画，我已经做出了这个答案。如果你不是，你可以，你可能期望提高性能......值得一试。

这里的问题似乎是webkit必须重绘两个非常重的盒子阴影。这似乎不是一个大任务，但如果你开始删除插入框阴影，我想你会看到一个惊人的性能跳跃。

我在我的Android设备（基于Webkit的浏览器）上经历过boggy滚动，并进行了此测试以确定问题所在。文本阴影在UI类型设置中有些不相关。梯度也非常无关紧要。一旦我击中了盒子阴影，我就注意到了一个几乎线性的性能进展，因为我逐个像素地移除了模糊半径。

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

所以你可能想要阻止盒子阴影并尽可能使用图像，否则只需使用较小的阴影。一旦你达到了webkit可以在低端设备上每秒至少刷新20次UI的程度，你就可以了。

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

移动设备上的CSS3性能

1 个答案: