首页 > 代码库 > JS魔法堂:Data URI Scheme介绍

JS魔法堂:Data URI Scheme介绍

一、前言

  上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错。本篇先不管到底有用与否,仅仅记录理论知识。也希望大家一起来分享实战经验啊!

 

二、从HTTP URI Scheme入手

  对于 <a href=http://www.mamicode.com/"http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://github.com就是HTTP URI Scheme,那么什么是DATA URI Scheme呢?其实就是形如data:text/jpeg;base64,XINGSXXIANGJIJIGSAG===的资源链接,一般出现在img元素的src属性。

  DATA URI Scheme的作用,一般就是将经过Base64编码的数据嵌入网页中,从而减少请求资源的链接数。上面的DATA URI Scheme中base64,后的字符就是经过base64编码后的数据,浏览器会对其解码并渲染该图片资源。

 

三、Data URI Scheme格式

  data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

  ①.  data :协议名称;

  ②.  [<mime type>] :可选项,数据类型(image/png、text/plain等)

  ③.  [;charset=<charset>] :可选项,字符集编码方式

  ④.  [;<encoding>] :数据编码方式(默认US-ASCII,BASE64两种)

  ⑤.  ,<encoded data> :编码后的数据

 注意:

 [a].  [<mime type>][;charset=<charset>] 的缺省值为HTTP Header 中Content-Type的字段值;

   [b].  [;<encoding>] 的默认值为US-ASCII

 

 

四、优点&缺点

 

五、优化方案

 

六、浏览器支持