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

问题描述

有没有人，或知道谁拥有，评估了CSS VS使用图像使用背景渐变的性能？

这绝对是更灵活，更高效使用code，但有一个性能缺点使用CSS的渐变按钮，酒吧，等等？

下面是一个简单的跨浏览器的CSS梯度​​：

 背景：＃1E5799; / *旧的浏览器* /
背景：-moz线性梯度（顶，＃1E5799 0％，＃2989D8 50％，＃207cca 51％，＃7db9e8 100％）; /* 火狐 */背景：-webkit梯度（线性，左上，左下，色停止（0％，＃1E5799），颜色停止（50％，＃2989D8），颜色停止（51％，＃207cca），color-停止（100％，＃7db9e8））; / * *的WebKit /过滤：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃1E5799'，endColorstr ='＃7db9e8'，GradientType = 0）; / *从* /背景：-o-线性梯度（顶，＃1E5799 0％，＃2989D8 50％，＃207cca 51％，＃7db9e8 100％）; / * *歌剧/
 

解决方案

根据对Webkit的维基文章，图片有更好的表现：

  

有时是很有诱惑力的使用WebKit的绘图功能，如-webkit-梯度，当它实际上不是必要的 - 维护映像和处理Photoshop和绘图工具可以是一个麻烦。然而，使用CSS这些任务从移动设计师的电脑为目标的CPU的麻烦。否则，静态图像总是快 - 只需要（例如，当形状为动态基于内容）时的梯度，阴影和CSS中其他装饰应该被使用。在很低端的平台，它甚至建议使用静态图像对于一些可能的话的文字。

来源：<一个href=\"https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages\">https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然，你有CPU时间来平衡与额外的时间，将采取从服务器加载图像。此外，对于IE浏览器，过滤器是极其缓慢的，尤其是如果你有很多在一个页面上。

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

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?

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

解决方案

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

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.

Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

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中使用VS使用的图像背景渐变的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！