JS魔法堂：Data URI Scheme介绍
一、前言
上周五公司内部的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
四、优点&缺点
五、优化方案
六、浏览器支持
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
