什么更快，通过 css 渲染渐变或直接加载图像？答案

【问题标题】：What is faster, rendering gradient through css or load an image directly?什么更快，通过 css 渲染渐变或直接加载图像？
【发布时间】：2010-06-24 10:21:49
【问题描述】：

我的问题是因为我喜欢新的 CSS3 样式技术，但我不太确定它是否值得！

（子问题；有人知道是否可以使用 jQuery 对页面应用渐晕效果吗？）

谢谢大家

【问题讨论】：

标签： jquery image css effects

【解决方案1】：

渐变可能总是更快，因为它会节省 HTTP 请求，并为图形芯片提供比位图图像更优化渲染的可能性。不过，我没有任何基准来支持这一点，这只是有根据的推测。

另一方面，我不确定渲染速度在这里是否真的很重要。目前，这些样式技术更重要的缺点是并非所有浏览器都支持它们。你不会支持旧的 Firefox 和 IE（至少在使用 CSS3 属性时），对于许多需要支持这些受众的网站来说，这就是暂时的结束。

相关：Here 是一个教程，声称使用专有标签对 IE、FF3.6+ 和 Webkit 浏览器提供跨浏览器支持。

【讨论】：

IE6/7/8 通过filter 支持渐变，尽管它可能很丑。当然，它并不适用于所有情况。例如，过滤器对文本和图像进行抗锯齿处理。
出于某种愚蠢的原因，我倾向于忽略仍在使用 IE 6 / 7 的人，不知道是不是因为我潜意识地不喜欢人们仍在使用它们。但我不应该，所以我不得不承认你是对的。如果我们（开发人员/设计师）想要将我们的网站提升到一个新的水平，我们应该为每个项目编写后备编码吗？我想是的，感谢您提供一些启示！
@Andy 我总是很惊讶地看到filter 命令的强大和多功能性（并且从 IE 5.5 开始就受到支持，比任何其他浏览器想出这些东西早几年！）太糟糕了他们是如此专有......
是的，如果他们一开始就将它们实现为适当的 CSS 扩展，他们可能会改善多年来困扰他们的问题。相反，他们没有努力改进这些过滤器。
@Andy 是的。看看它们提供的功能，它们理应成为标准的一部分，并且我们本可以在 2005 年左右的所有主要浏览器中拥有渐变和 alpha 透明度。但是不，他们必须将它绑定到 ActiveX 等等。典型的微软。太糟糕了，机会错过了！

【解决方案2】：

除了性能问题。如果用户的浏览器不支持CSS3怎么办？

如果您使用图像，每个人都可以看到渐变。如果您使用 CSS3，只有使用最新浏览器的人才能看到渐变。所以为了兼容性，我推荐图片。

【讨论】：