JS魔法堂：Data URI Scheme介绍

标签：style   blog   http   color   io   数据   ar   line   

一、前言

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

二、从HTTP URI Scheme入手

  对于 <a href="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

四、优点&缺点

五、优化方案

六、浏览器支持

JS魔法堂：Data URI Scheme介绍,布布扣,bubuko.com

JS魔法堂：Data URI Scheme介绍

标签：style   blog   http   color   io   数据   ar   line   

原文地址：http://www.cnblogs.com/fsjohnhuang/p/javascript.html