通过css渲染渐变和直接加载图片哪个更快？
我提出这个问题的原因是因为我喜欢新的 CSS3 样式技术，但我不太确定它是否值得！
（子问题；有人知道是否可以使用 jQuery 对页面应用渐晕效果吗？）
谢谢大家
The reason for my question is because I like the new CSS3 styling techniques, but i'm not quite sure if it's worth it!
(sub-question; anybody that knows if it's possible to use jQuery to apply a vignetting effect to a page?)
Thanks guys
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
渐变可能总是会更快，因为它将节省 HTTP 请求，并为图形芯片提供比位图图像更多的优化渲染的可能性。不过，我没有任何基准来支持这一点，这只是有根据的猜测。
另一方面，我不确定渲染速度是否真的与此相关。目前这些样式技术更重要的缺点是并非所有浏览器都支持它们。您不会支持较旧的 Firefox 和 IE（至少在使用 CSS3 属性时），并且对于许多需要支持这些受众的网站来说，这暂时结束了。
相关：这里是一个教程，声称跨浏览器支持使用专有标签的 IE、FF3.6+ 和 Webkit 浏览器。
The gradient is probably always going to be faster, as it will save a HTTP request and provides more possibilities for graphics chips to optimize rendering than a bitmap image. I don't have any benchmarks to back this up, though, it's just educated speculation.
On the other hand, I'm not sure whether rendering speed is really relevant here. The more important downside of those styling techniques at the moment is that not all browsers support them yet. You're not going to support on older Firefoxes and IEs (at least when using the CSS3 properties), and for many sites that need to support those audiences, that is the end of it for the moment.
Related: Here is a tutorial that claims cross-browser support for IE, FF3.6+, and Webkit browsers using proprietary tags.
除了性能问题。如果用户的浏览器不支持CSS3怎么办？
如果您使用图像，每个人都可以看到渐变。如果您使用 CSS3，则只有使用最新浏览器的人才会看到渐变。因此，为了兼容性，我建议使用图像。
Besides the performance issues. What do you do if the browser of the user does not support CSS3?
If you use images everybody is able to see the gradient. If you use CSS3 only people using the latest browsers will see the gradient. So for compatibility I'd recommend images.