CSS3 在移动设备上的性能
我们一直在 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 位置），动画会非常慢，甚至不流畅。
我们怎样做才能让动画流畅呢？
附言。在 iPhone 4S 上运行得很好（因为 CPU 更好）
We've been testing with CSS3 on iPhone's (3G + 4) and we came on some performance issues.
We got a Webapp that show's a profile picture + extra information.
We have a box (default we hide the box for 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;
And we have 3 icons with a label underneath:
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;
Now, if we animate (make it move to an higher Y position) te box, the animation is realy slow, not even smooth.
What can we do to make the animation smooth?
PS. on an iPhone 4S is runs quit nice (because of the better CPU)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
编辑：假设您使用 CSS3 过渡制作动画，我就做出了这个答案。如果你不是，而且你可以，你可能会期望性能得到改善......值得一试。
这里的问题似乎是 webkit 必须重新绘制两个非常重的盒子阴影。这似乎不是一项艰巨的任务，但如果您一开始就删除了嵌入的框阴影，我想您会看到令人惊讶的性能飞跃。
我在我的 Android 设备（基于 Webkit 的浏览器）上遇到了沼泽滚动，并进行了此测试以确定问题所在。文本阴影在 UI 类型设置中有些无关紧要。渐变也相当无关紧要。一旦我点击了盒子阴影，我注意到当我逐个像素地删除模糊半径时，性能几乎呈线性增长。
例如，在大 div 上渲染 6px 半径可能需要 80 毫秒。如果我将其降低到 3 像素，渲染时间将接近 40 毫秒。 2px，大约20ms。
因此，您可能希望保留盒子阴影，并在可能的情况下仅使用图像，否则仅使用较小的阴影。一旦你达到了 webkit 可以在低端设备上每秒重绘 UI 至少 20 次的地步，你可能就没事了。
这似乎是显而易见的。由于没有渲染质量的选项（例如），因此除了缩小范围外，您无法真正优化它...对于移动设备，您真正能做的就是抑制效果并根据您的限制优化您的艺术作品。
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.