Question

我想知道哪一个更有效地使用CPU和RAM？

使用图像文件并重复：

background:url(../images/livebg/02a.jpg) repeat-x

或使用CSS webkit背景渐变：

background : -moz-linear-gradient(50% 100% 90deg,rgba(0, 111, 122, 1) 0%,rgba(0, 68, 75, 1) 100%);
background : -webkit-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%); 
background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(0, 111, 122, 1) ),color-stop(1,rgba(0, 68, 75, 1) ));  
background : -o-linear-gradient(90deg, rgba(0, 111, 122, 1) 0%, rgba(0, 68, 75, 1) 100%);

图像尺寸为1x40像素。

Answer 1

没有真正的区别。当前的浏览器引擎都在内部将渐变渲染为图像，然后在实际页面渲染期间使用它。调整包含元素大小时可能会触发重新渲染，但这可以忽略不计。

问题在于过早的微观优化。与网络流量和往返的大得多的开销相比，页面渲染速度很少相关。因此，使用CSS渐变肯定是一个更好的主意，因为它消除了往返（尽管出于完全相同的原因，你应该将40像素图像作为数据URL嵌入）。

Answer 2

CSS渐变不会使用你的带宽，但会使用你的CPU和ram而不是背景图像。

另一方面，与渐变相比，背景图像将使用您的多数带宽。所以这是权衡。

如果您可以使用它，我会建议使用CSS渐变，因为如果您的图像是一大块数据，它可能会阻塞您的应用程序。

最佳使用方法是使用CSS渐变，并使用图像作为不支持的浏览器的后退。

Answer 3

两者都很好。但最好使用渐变，因为图像比渐变需要更多的时间来加载。

Answer 4

我使用的 Jquery UI 主题使用重复的 1 像素宽图像作为背景。一些 CSS 技巧并将它们全部更改为渐变，性能提升非常明显。

不确定更广泛的图像性能，但渐变看起来更清晰和现代。

哪一个有更好的性能，CSS渐变或背景图像？

4 个答案: