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

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

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

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

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

URL的格式由三部分組成：

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

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

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

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

data:text/html, 

可見其中并沒有標識位置，也沒有標識資源的名稱，所以它就只是一個URI，具體來講叫data URI。
其格式規(guī)定如下：

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

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

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

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

至于上面提到的base64，簡單來講，這種編碼方式使用64個字符進行數(shù)據(jù)編碼，包括大小寫英文字母、數(shù)字0~9、+、/。其特點就是把二進制數(shù)據(jù)編碼為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的算法會把原字符串中逐三字節(jié)拓為四字節(jié)，最終反倒是比原資源多出了三分之一的數(shù)據(jù)量。

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