1

我们一直在 iPhone (3G + 4) 上使用 CSS3 进行测试，但遇到了一些性能问题。

我们有一个显示个人资料图片 + 额外信息的Web 应用程序。



我们有一个框（默认我们将框隐藏 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 位置），动画真的很慢，甚至不流畅。

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

PS。在 iPhone 4S 上运行非常好（因为 CPU 更好）

4

1 回答 1

2

Edit: I've made this answer assuming you're animating with CSS3 transitions. If you aren't, and you can, you could possibly expect improved performance... It's worth a shot.

The issue here appears to be that webkit has to repaint two really heavy box-shadows. This doesn't seem like a big task, but if you removed the inset box-shadow to start with, I imagine you'd see a surprising performance jump up.

I've experienced boggy scrolling on my android device (Webkit based browser) and did this testing to determine what the issue was. Text-shadow was somewhat irrelevant in UI type settings. Gradients were also pretty inconsequential. Once I hit box-shadow, I noticed an almost linear progression in performance as I removed the blur radius pixel by pixel.

For example, a 6px radius may have taken 80ms to render on a large div. If I brought that down to 3px, rendering times were close to 40ms. 2px, around 20ms.

So you might want to hold back on the box-shadow and just use images if possible, otherwise just use a smaller shadow. Once you hit the point where webkit can repaint the UI at least 20 times in a second on a low end device, you are probably okay.

It may seem obvious. Since there's no option for quality of rendering (For example), you can't really optimize this beyond scaling back... For mobile devices, all you can really do is hold back on the effects and optimize your art work based on your restrictions.

于 2011-11-14T23:29:14.777 回答