前端技术：网站性能优化之CSS无图片技术

在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。

二、为什么要“无图片”？

首先我们通过yslow的statistics查看新浪微博最新版首页的文件，得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。

下面我们通过计算来说下CSS文件与CSS Image关系

CSS Image是由一系列的图片组成，每一张图，即使最小一个小箭头(如下图)，你存成一张图片，怎么也得1KB吧。

例如微博的这个小三角图形

HTML代码如下

通过以上分析，使用CSS无图片技术，可以总结得到以下3个优点

减少请求资源的大小

减少http的请求个数

提高可维护性

三、CSS无图片技术，微博中有哪些实际应用呢？

四、无图片技术的实现方式

大概有四种方式：一是通过background-color、border生成图片;二是通过字符生成图片;三是通过CSS3 的gradient等生成图片(这个要考虑低级浏览器不兼容的问题);四是CSS3的自定义字体(@font-face)生成图片。

利用CSS的background-color、border属性可以生成一些图形，例如三角。纯粹的CSS2的内容，完全可以兼容IE6。

1)用background-color生成的小方块，效果如下：

HTML结构：

1)尖角，效果图如下

微博名人堂没做具体的定义，但是建议可以对字体样式做些限制，以便在各种浏览器表现一样。

3.CSS3生成图片，使用box-shadow，border-radius，gradient渐变等CSS3的新属性生成图形，IE浏览器下渐变背景的使用需要使用IE的渐变滤镜，但是使用滤镜资源会消耗很大，所以，根据项目实际情况去权衡是否使用滤镜。

先看下谷歌搜索按钮的例子

再看一下淘宝网“查看更多”的按钮

4. CSS3的自定义字体(@font-face)生成图片，虽然这个方法不属于真正意义的无图片，但是容易编辑和维护，更重要的是它的尺寸，颜色可以通过CSS来控制，这间接地做到少使用图片。

具体应用，微博微吧的ICON

总之，CSS无图片技术，是我们在写CSS样式中需要形成的一种理念，我不必死磕无图片技术，要在实际的项目权衡利弊，根据实际情况，灵活运用无图片技术做一些合理有效的性能优化。

转自：互联网的一些事