Data URI的利弊

最近Data URI似乎热了起来，特别是从淘宝UED上发了一篇《 Data URI小试 —— 在旺旺点灯(JS)上的应用 》后，陆续出现这方面的文章。看到不少人提到Data URL时都只是提到了优点，我也好奇了一把，借这机会更全面了解了下。

说到Data URI的优点，自然少不了“减少链接数”，把图片转为Base64编码，以减少图片的链接数。我们先想当然一下，同样一张图片，如果不用发起一个下载请求，打开速度是会更快的。但是，有几个问题需要关注下：

• 图片始终是要下载的，那么下载一张图片的速度快还是下载一堆编码快？
• 浏览器对图片的显示，处理效率哪个更快？
• 图片的缓存问题

做了几个Demo，我们来看对比下：
多小图的处理对比： Demo1 DataURI ； Demo2 img
单图处理对比： Demo1 DataURI ； Demo2 img

多刷新几次，可以发现，使用Data URI方式的Demo在渲染时会比不使用 多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍 。由此可见，使用Data URl方式还是需要更多的考量，在可接受的范围内适量使用。

有关Data URI的介绍可以看下《 data URI scheme 》和《 利用 Data URL 加速你的網頁 》，里面提到的IE8以下浏览器不支持的问题，相应的解决方案可以看《 MHTML – when you need data: URIs in IE7 and under 》，当然使用这种方法的代价就是为了兼容IE6\7，使代码量多出一倍；优点是可以被Cache和Gzip压缩。

在 CSS森林 下方使用了另一种兼容IE6\7的方式，有兴趣的同学可以找找。