摘要：所謂網(wǎng)址有兩層含義，一是直接使用網(wǎng)站服務(wù)器的地址，以及便于記憶的域名，輸入域名后瀏覽器會(huì)通過(guò)獲得該域名對(duì)應(yīng)的地址。但作為互聯(lián)網(wǎng)的使用者，每個(gè)人都應(yīng)了解到，正因有了，我們才能方便地使用整個(gè)互聯(lián)網(wǎng)豐富多彩的資源和服務(wù)。

近來(lái)看到chrome一個(gè)很geek的用法：一行代碼，打造在線編輯器，試了一下發(fā)現(xiàn)挺有趣的。那我們?cè)跒g覽器輸入那一行的是什么呢？

其實(shí)從本質(zhì)上，那不是什么代碼、更不是什么網(wǎng)址，而是一個(gè)data URI。何為data URI？這又得從頭講起。

標(biāo)題列舉了幾個(gè)名詞，不細(xì)究地話，多數(shù)的互聯(lián)網(wǎng)的使用者們還是容易分不清的。這幾個(gè)東西有個(gè)共同點(diǎn)就是能通過(guò)瀏覽器輸入并訪問(wèn)，而瀏覽器的輸入框也確實(shí)能接收不少東西，其中最基本的功能便是讓我們輸入網(wǎng)址。所謂網(wǎng)址有兩層含義，一是直接使用網(wǎng)站服務(wù)器的ip地址，以及便于記憶的域名，輸入域名后瀏覽器會(huì)通過(guò)DNS獲得該域名對(duì)應(yīng)的ip地址。

但我們會(huì)發(fā)現(xiàn)，只輸入網(wǎng)址后，瀏覽器會(huì)自動(dòng)在其前面加上http或https：我們也會(huì)發(fā)現(xiàn)，我們?cè)L問(wèn)的網(wǎng)站域名后面還會(huì)加上其他一些東西。因?yàn)榫W(wǎng)址只是個(gè)地址，而我們找到對(duì)方的服務(wù)器后，還要使用其服務(wù)、并進(jìn)一步使用它的文件資源；使用什么服務(wù)由雙方使用的應(yīng)用協(xié)議如http決定，而使用該服務(wù)下的什么資源就需要我們能在浩如煙海的互聯(lián)網(wǎng)中標(biāo)定該資源及其位置，這就產(chǎn)生了URL（統(tǒng)一資源定位符）。

URL的格式由三部分組成：

scheme://host[:Port][/path]

依次指示了服務(wù)類型、主機(jī)、端口及資源路徑，通過(guò)這樣的方式全網(wǎng)資源的位置就都有了標(biāo)記，我們只需在瀏覽器輸入一段URL便能查看資源。當(dāng)然URL的直接使用者多是程序員們，畢竟很多時(shí)候用戶都不需要自己完整地輸入U(xiǎn)RL，因?yàn)闉g覽器的歷史記錄、提示功能已經(jīng)能相當(dāng)迅速地判斷我們要訪問(wèn)什么了。但作為互聯(lián)網(wǎng)的使用者，每個(gè)人都應(yīng)了解到，正因有了URL，我們才能方便地使用整個(gè)互聯(lián)網(wǎng)豐富多彩的資源和服務(wù)。

扯了這么多，那URL和URI、URN，又是什么關(guān)系？其實(shí)很簡(jiǎn)單，URL既負(fù)責(zé)標(biāo)識(shí)資源又要指示其位置，而URN只負(fù)責(zé)標(biāo)識(shí)資源名字，同時(shí)URL和URN都是URI的兩個(gè)子集，所以URI既可以是URL、URN中一種，也可以兩者都是、都不是?？傊?，他們幾個(gè)間最大的區(qū)別就是有無(wú)包含位置信息、有無(wú)包含資源名，比如一個(gè)磁力鏈接magnet:?xt=urn:btih:abcdef就是一個(gè)URN也是個(gè)URI，但卻不是URL，因?yàn)椴荒芡ㄟ^(guò)它判斷你要下載的文件到底在哪臺(tái)服務(wù)器上。

現(xiàn)在，再來(lái)看看我們?yōu)楦脑靋hrome而輸入的那一行，比如：

data:text/html, 

可見(jiàn)其中并沒(méi)有標(biāo)識(shí)位置，也沒(méi)有標(biāo)識(shí)資源的名稱，所以它就只是一個(gè)URI，具體來(lái)講叫data URI。
其格式規(guī)定如下：

data:[][;charset=][;base64],

：要呈現(xiàn)的數(shù)據(jù)類型，默認(rèn)text/plain
：使用的字符集，默認(rèn)US-ASCII
base64：使用base64編碼方式；沒(méi)聲明這個(gè)則使用URL編碼，超過(guò)URL編碼范圍的字符將采用%xxx的十六進(jìn)制編碼

了解了data URI的原理后，回過(guò)頭看一下實(shí)現(xiàn)在線編輯器的URI，我們就是使用了一個(gè)mime type為text/html的data URI。而在部分，你便可以使用html、javascript、css在一行小小的輸入框里盡情碼出你想要的效果，乃至實(shí)現(xiàn)一個(gè)有g(shù)eek范的編輯器等單頁(yè)面應(yīng)用~

字符進(jìn)行編碼主要是為了便于傳輸或者加密。在瀏覽器上對(duì)含有非標(biāo)準(zhǔn)字符的URL都會(huì)使用URL編碼，即將一個(gè)字符轉(zhuǎn)換為%加幾位十六進(jìn)制編碼，比如js的encodeURI()、encodeURIComponent()方法可實(shí)現(xiàn)這一功能。

至于上面提到的base64，簡(jiǎn)單來(lái)講，這種編碼方式使用64個(gè)字符進(jìn)行數(shù)據(jù)編碼，包括大小寫(xiě)英文字母、數(shù)字0~9、+、/。其特點(diǎn)就是把二進(jìn)制數(shù)據(jù)編碼為ASCII字符，同時(shí)相比URL編碼這種十六進(jìn)制編碼方式，base64編碼后的字符串長(zhǎng)度更小，比如Nicholas在這篇文章里舉了個(gè)例子，下面兩個(gè)data URI標(biāo)識(shí)了同一張圖片：

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編碼的字符串長(zhǎng)度大大被壓縮了，當(dāng)然這只是相對(duì)URL編碼這種十六進(jìn)制編碼方式看起來(lái)變短了，其實(shí)base64的算法會(huì)把原字符串中逐三字節(jié)拓為四字節(jié)，最終反倒是比原資源多出了三分之一的數(shù)據(jù)量。

雖然用data URI來(lái)編寫(xiě)web應(yīng)用是個(gè)十分geek的行為，但是除了這些，別忘了data URI的本來(lái)目的---讓我們方便地用字符標(biāo)記和傳送web上的資源。如果我們?cè)诖a中使用data URI標(biāo)識(shí)的資源，優(yōu)勢(shì)是data URI本身就被看成代碼文件的一部分，相比每次用http請(qǐng)求加載資源要快；缺點(diǎn)則如上文所訴，其會(huì)一定程度地加大數(shù)據(jù)量。然而只要資源請(qǐng)求的數(shù)目遠(yuǎn)大于數(shù)據(jù)量的增加，在資源加載過(guò)程中避免耗時(shí)的http請(qǐng)求而節(jié)省的時(shí)間就能抵消掉數(shù)據(jù)量變大帶來(lái)的影響，這對(duì)于那些請(qǐng)求的每個(gè)資源較小、但請(qǐng)求高頻的web服務(wù)提升性能而言，是大有好處的。