05月16, 2013

关于图片DATA URI的更多优化

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

  1. 通过正则找到CSS里包含的图片,如果图片小于一定的大小(如:3K),则将图片地址变为DATA URI的方式
  2. HTML里引用的地方增加IE的条件注释。如:

    <!--[if (lt IE 8.0)]>
    <link type="text/css" rel="stylesheet" href="/resource/css/index.src.css?v=cb253ff2.css" />
    <![endif]-->
    <!--[if (!IE)|(gte IE 8.0)]>
    <!-->
    <link type="text/css" rel="stylesheet" href="[/resource/css/index.src_datauri.css?v=20912530.css](http://yunpan.360.cn/resource/css/index.src_datauri.css?v=20912530.css)" />
    <!--<![endif]-->
    

    开发的时候直接使用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://www.welefen.com/more-about-img-use-data-uri-opti.html

本文链接:https://75team.com/post/关于图片data-uri的更多优化.html

-- EOF --

Comments

评论加载中...

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