html - 使用背景图片还是 CSS3 渐变效果更好？ (电话机)

Question

假设我正在使用一个 DIV 元素，我可以为其添加背景图像或可以复制创建 CSS3 渐变的相同样式。现在，对于 Phonegap 应用程序(所有图像文件都驻留在设备本身)，哪个选项更好。

我问这个是因为我在某处看到渐变需要一些计算时间，而使用图像可能会造成加载时间问题。但对于 Phonegap 应用程序，图像加载时间问题可能不存在。那么，也许在这里使用图像是更好的选择？

Answer 1

根据 Webkit Wiki 上的一篇文章，图像性能更好:

Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.

来源:https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然，您必须平衡 CPU 时间与从服务器加载图像所需的额外时间。此外，对于 Internet Explorer，过滤器非常慢，尤其是当您在一个页面上有很多过滤器时。