Data URI在旺旺点灯(JS)上的应用

旺旺点灯(JS)实践经过：

因为要对SRP(Search Result Page)页面进行优化，我们想尽方法节约每一个连接，然后想到了Data URI，ok，先在旺旺点灯里尝试下。

我们都知道，要在实际应用中用上Data URI，必须针对IE6^[1]/7使用MHTML。

第一次尝试的代码如下：DEMO

background:url({data uri});
*background:url({mhtml}); // IE6/7

似乎没有问题，但如果你用的是IE8，请在IE8兼容模式里看下，你会发现旺旺图片并没有显示出来。随后测试了多位同事的IE8，找到了原因：

IE8兼容模式下支持IE7的css hack(如 *)，但并不支持mhtml，而我上面的写法使得支持 * hack的浏览器都使用了mhtml。

并且，非常郁闷的是，光IE8就有以下情况:

• 1. 8.0.6001.18702IC，应该是一个早期的版本，支持data-uri和mhtml，没得说。^[2]
• 2. 8.0.7600.16385，有的默认打开是IE8 Mode，有的默认打开是IE8 Compat Mode，就是这个IE8 Compat Mode使得上面的写法产生了bug。

好了，因为是在JS中使用，解决方案也很简单，就是用JS判断下兼容模式，让IE8 Compat Mode也使用data-uri。

最后代码如下：

var compat_mode =  /trident\/\d/i.test(navigator.userAgent),
　　css_text = 'background:url({data uri});' + compat_mode ? '' : '*background:url({mhtml});';

DEMO

淘宝线上试点应用：SRP

最小文件尝试：将旺旺的css sprite进行各种拆分

图片大小为11.773K

我将图片进行了3种拆分(拆分工具：Firework)，上下、左右、上下左右，试着寻找最小文件的组合规律，可惜暂时没有收获。

原始大小 压缩后大小 gzip后大小

一个大图

左右(两张图片)

上下(三张图片)

上下左右(6个小图标)

30.9K	30.8K	12.139K
35.5K	35.5K	8.094K
30.2K	30.1K	9.960K
38.4K	38.3K	10.811K

可以看到，如果按最优的方法(左右组合)来使用data-uri替换sprite，可节约3.7K和一个连接数。

CSS应用展望：

要在CSS里进行应用，可能还得先解决以下问题：

• 1. 上面描述的IE8 Compat Mode，CSS中没有对应的hack方法
• 2. 经测试，发现IE下同一个css文件加不同的时间戳，会被下载两次。
  而淘宝的页面时通过时间戳来控制文件缓存的，这意味着每次更改CSS文件都要保持"页面里的CSS路径"和"MHTML中引用"的完全一致。
• 3. YUI Compressor的CSS压缩问题
  打开http://a.tbcdn.cn/sys/wangwang/tbww_v1.1_srp.js，我们会发现MHTML是写在注释里的，所以文件上线时需要保留这部分注释信息。
  通过YUI Compressor压缩JS的时候可以用 /*! ..... */ 这样的方法保留注释，而在压缩CSS的时候此方法无效。

对应的解决方案如下：

• 1. 通过JS给html元素增加class='compat-mode'，然后CSS代码如下
  

  .compat-mode .data-uri-cls, .data-uri-cls {
  	background:url({data-uri});
  }
  .data-uri-cls {
  	*background:url(mhtml);
  }

• 2. 发现秦歌文章中的有一个CSS Expression的解决方案 ^[3]
• 3. 等待YUI Compressor调整或利用ant先提取注释压缩完再加回去

参考文章

秦歌, http://dancewithnet.com/2009/08/15/data-uri-mhtml/

克军, http://hikejun.com/demo/css/data-uri.html

Wikipedia, http://en.wikipedia.org/wiki/Data_URI_scheme

Msdn, http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx

Stoyan, http://www.phpied.com/data-urls-what-are-they-and-how-to-use/, http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

R Reid, Detecting IE 8 Compatibility Modes with Javascript

[1] IE6有个可以忽视的bug：打开mhtml格式的图片，再选中地址栏，按回车，浏览器崩溃。

[2] xp下载过来的IE8好像都是这个版本。

[3] 请注意，使用YUI Compressor压缩CSS Expression时可能会出错，Expression越复杂，出错几率越大。