Data URI的利弊

Ghostzhang 发表于

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

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

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

做了几个Demo,我们来看对比下:

多小图的处理对比: Demo1 DataURIDemo2 img

单图处理对比: Demo1 DataURIDemo2 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的方式,有兴趣的同学可以找找。

评论