最近看到chrome一个很geek的用法：一行代码，打造在线编辑器，试了一下发明挺风趣的。那我们在浏览器输入那一行的是什么呢？
实在从本质上，那不是什么代码、更不是什么网址，而是一个data URI。作甚data URI？这又得重新讲起。
URI？URL？URN？域名？网址？
题目列举了几个名词，不细究地话，多半的互联网的运用者们照样轻易分不清的。这几个东西有个共同点就是能经由过程浏览器输入并接见，而浏览器的输入框也确切能吸收不少东西，个中最基本的功用就是让我们输入网址。所谓网址有两层寄义，一是直接运用网站效劳器的ip地点，以及便于影象的域名，输入域名后浏览器会经由过程DNS获得该域名对应的ip地点。
但我们会发明，只输入网址后，浏览器会自动在其前面加上http或https：我们也会发明，我们接见的网站域名背面还会加上其他一些东西。由于网址只是个地点，而我们找到对方的效劳器后，还要运用其效劳、并进一步运用它的文件资本；运用什么效劳由两边运用的运用协定如http决议，而运用该效劳下的什么资本就须要我们能在不计其数的互联网中标定该资本及其位置，这就产生了URL（一致资本定位符）。
URL的花样由三部份构成：
scheme://host[:Port][/path]
顺次指导了效劳范例、主机、端口及资本途径，经由过程如许的体式格局全网资本的位置就都有了标记，我们只需在浏览器输入一段URL便能检察资本。固然URL的直接运用者多是程序员们，毕竟许多时刻用户都不须要自身完整地输入URL，由于浏览器的历史记录、提醒功用已能相称迅速地推断我们要接见什么了。但作为互联网的运用者，每一个人都应相识到，正因有了URL，我们才方便地运用全部互联网丰富多彩的资本和效劳。
扯了这么多，那URL和URI、URN，又是什么关系？实在很简朴，URL既担任标识资本又要指导其位置，而URN只担任标识资本名字，同时URL和URN都是URI的两个子集，所以URI既可所以URL、URN中一种，也能够二者都是、都不是。总之，他们几个间最大的区分就是有没有包含位置信息、有没有包含资本名，比方一个磁力链接magnet:?xt=urn:btih:abcdef就是一个URN也是个URI，但却不是URL，由于不能经由过程它推断你要下载的文件究竟在哪台效劳器上。
data URI
如今，再来看看我们为革新chrome而输入的那一行，比方：
data:text/html, <html contenteditable>
可见个中并没有标识位置，也没有标识资本的称号，所以它就只是一个URI，详细来说叫data URI。
其花样划定以下：
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
<mime type>：要显现的数据范例，默许text/plain<charset>：运用的字符集，默许US-ASCIIbase64：运用base64编码体式格局；没声明这个则运用URL编码，凌驾URL编码局限的字符将采纳%xxx的十六进制编码
相识了data URI的道理后，回过甚看一下实如今线编辑器的URI，我们就是运用了一个mime type为text/html的data URI。而在<encoded data>部份，你便能够运用html、javascript、css在一行小小的输入框里恣意码出你想要的结果，以致完成一个有geek范的编辑器等单页面运用~
关于编码体式格局
字符举行编码重要是为了便于传输或许加密。在浏览器上对含有非标准字符的URL都邑运用URL编码，行将一个字符转换为%加几位十六进制编码，比方js的encodeURI()、encodeURIComponent()要领可完成这一功用。
至于上面提到的base64，简朴来说，这类编码体式格局运用64个字符举行数据编码，包含大小写英文字母、数字0~9、+、/。其特性就是把二进制数据编码为ASCII字符，同时比拟URL编码这类十六进制编码体式格局，base64编码后的字符串长度更小，比方Nicholas在这篇文章里举了个例子，下面两个data URI标识了统一张图片：
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge
8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h
LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g
77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85
%FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE
%CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00
%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00
%00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08
%13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C
%A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80
%80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84
%02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D
%BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7
%AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07
%02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03
%AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B
能够很明显看到Base64编码的字符串长度大大被紧缩了，固然这只是相对URL编码这类十六进制编码体式格局看起来变短了，实在base64的算法会把原字符串中逐三字节拓为四字节，终究反倒是比原资本多出了三分之一的数据量。
data URI与机能
虽然用data URI来编写web运用是个非常geek的行动，然则除了这些，别忘了data URI的原本目标—让我们方便地用字符标记和传送web上的资本。假如我们在代码中运用data URI标识的资本，上风是data URI自身就被算作代码文件的一部份，比拟每次用http要求加载资本要快；瑕玷则如上文所诉，其会肯定水平地加大数据量。但是只需资本要求的数量远大于数据量的增添，在资本加载过程当中防止耗时的http要求而节约的时候就可以抵消掉数据量变大带来的影响，这关于那些要求的每一个资本较小、但要求高频的web效劳提拔机能而言，是大有优点的。
