在CSS中使用背景渐变与使用图像的性能如何？

Question

有没有人,或者知道有人,评估使用CSS中的背景渐变与使用图像的性能？

使用代码肯定更灵活,更高效,但是在按钮,条形等中使用css渐变是否存在性能下降？

以下是跨浏览器CSS渐变的示例:

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 */

Answer 1

根据Webkit Wiki上的一篇文章,图像表现更好:

有时使用webkit的绘图功能很有吸引力,比如-webkit-gradient,当它实际上没有必要时 - 维护图像和处理Photoshop和绘图工具可能会很麻烦.但是,使用CSS执行这些任务会使设计人员的计算机无法移动到目标的CPU.CSS中的渐变,阴影和其他装饰应仅在必要时使用(例如,当形状基于内容时是动态的) - 否则,静态图像总是更快.在非常低端的平台上,甚至建议在可能的情况下对某些文本使用静态图像.

资料来源:https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然,您必须平衡CPU时间与从服务器加载映像所需的额外时间.此外,对于Internet Explorer,过滤器非常慢,特别是如果您在一个页面上有很多.