image - 是使用图像还是 CSS 来尽可能保持网页或应用程序的性能更好？

Question

我和我的元素的创意设计师就使用他的作品的切片更好还是依赖浏览器的渲染引擎来创建用户体验的某些方面存在一些友好的分歧。

一个具体的例子是一个横跨整个小部件宽度的水平“栏”。他创建了一个非常时髦的渐变，其中涉及不同颜色和不透明度的几个停止点，他认为图像的小尺寸更可取，或者至少与添加的 CSS 代码行相比，需要在本地生成渐变。

我们已经在使用 CSS Sprite 技术来减少从服务器返回的次数，所以这对我们来说不是问题。现在，它只是使用切片图像与使用 CSS 和 HTML 渲染的优缺点。

关于图像需要多大才能成为两者中“更差”的选项，是否有明确的规则？

更新:由于一些人提到了梯度的复杂性作为一个因素，我将在这里展示它:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

非常复杂! ;-)

Answer 1

测量它!不是我想的那样的答案，但这实际上取决于 CSS 的复杂程度以及渲染所需的时间。

在大多数情况下，它是渲染时间(CSS 版本)与请求开销和传输时间(图像版本)的对比。您很可能会在这里看到大数字。由于您已经在使用图像 Sprite ，因此您正在将请求开销降至最低。

浏览器兼容性也是您应该注意的事项。在这里，当涉及到渐变和类似的东西时，图像通常会胜过 CSS。

一些非常复杂的 CSS3 站点来演示我的意思:http://lea.verou.me/css3patterns/ 这是一个非常好的案例研究，但速度非常慢。它在加载时滞后。滚动时它更滞后。而且我确信它比使用图像 Sprite 的解决方案慢得多。

不要误会我!我喜欢 CSS，但图像也很好。有时甚至更好。

总结

测量它!当您没有时间测量时，请估计 css 的复杂程度。当它趋于变得复杂时，则使用图像。当您遇到兼容性问题时，请使用图像。