在CSS中使用背景梯度和使用图像的性能如何？ [英] How does the performance of using background-gradients in CSS vs using images?

问题描述

有任何一个，或知道有谁，评估使用背景梯度在CSS中的性能vs使用图像？

Has any one, or know someone who has, evaluated the performance of using background-gradients in CSS vs using images?

使用代码肯定更灵活，更有效率，但是对于按钮，条形等使用css渐变有没有性能下降？

It is definitely more flexible and more productive to use code but is there a performance downside to using css gradients for buttons, bars, etc?

这是一个跨浏览器CSS渐变的示例：

Here is a sample cross browser CSS gradient:

background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

background: -o-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* opera */

推荐答案

Webkit Wiki中，图片表现更好：

According to an article on the Webkit Wiki, images perform better:

有时候很有可能使用webkit的绘图功能，比如-webkit-gradient，维护图像和处理Photoshop和绘图工具可能是一个麻烦。然而，使用CSS这些任务从设计师的计算机到目标的CPU移动麻烦。 CSS中的渐变，阴影和其他装饰只应在必要时使用（例如，当形状基于内容为动态时），否则静态图像总是更快。在非常低端的平台上，如果可能，甚至建议对某些文字使用静态图片。

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，过滤器非常慢，特别是如果你在一个页面上有很多。

Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.

这篇关于在CSS中使用背景梯度和使用图像的性能如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！