关于图片DATA URI的更多优化

我们知道，对于很小图片使用DATA URI可以减少图片的请求次数，从而达到优化的目的。但IE6、IE7并不支持（不讨论另类的方式让IE6、7也支持），所以一般是下面的处理方式:

1、通过正则找到CSS里包含的图片，如果图片小于一定的大小（如：3K），则将图片地址变为DATA URI的方式

2、HTML里引用的地方增加IE的条件注释。如： 开发的时候直接使用index.src.css这个文件，编译时自动变成有data uri的方式。

这种方式处理起来简单有效，但思考起来友如下的弊端：

1、如果css里有个地方引用了同一个图片地址，替换后导致对应的DATA URI含有多份，这样大大增加了文件大小。如：

.a{bacground:url(../img/a.png)} .b {background: url(../img/a.png)}

如果只是链接的话，虽然a.png被包含了2次，但并不会太多的增加文件大小。但如果转化为DATA URI的方式，增加的可就多了。

2、使用DATA URI的方式后，一份CSS文件只会在ie6\7下使用，另外一份是在ie>7或者其他浏览器下使用。随着css3越来越流行，css里会有越来越多关于css3的css，但这些css内容放在ie6\7的文件里完全是个浪费，ie6\7根本不认。同样对于ie6\7的hack在ie>7或者其他浏览器下也不会认。

优化办法

一个图片被多次使用

针对这个情况，有2个解决方案。

1、增加css检测，如果发现同一个图片被多次使用，需要开发者手工去修改，将多个selector合并。不修改无法上线

2、通过css压缩自动合并。这样方式虽然技术上可以实现，但不能保证100%的正确性。

不识别css自动过滤

之前通过正则的办法处理，就无法做到不识别的css的自动过滤。这个时候需要完善的css词法分析和语法分析。好在有FL作为底层支持，这些功能之前都已经开发好了，所以实现就相对比较简单了。

由于对css的修改量较大，目前燕尾服里的这个功能还在测试中，近期会上线。