05月02, 2013

关于图片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的修改量较大,目前燕尾服里的这个功能还在测试中,近期会上线。

本文链接:http://welefen.com/post/more-about-img-use-data-uri-opti.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。