首页 > 代码库 > 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
四、优点&缺点
五、优化方案
六、浏览器支持