data URI及其應用

時間 2019-12-06

標籤 data uri 及其應用简体版

原文原文鏈接

近來看到chrome一個很geek的用法：一行代碼，打造在線編輯器，試了一下發現挺有趣的。那咱們在瀏覽器輸入那一行的是什麼呢？javascript

其實從本質上，那不是什麼代碼、更不是什麼網址，而是一個data URI。何爲data URI？這又得從頭講起。css

URI？URL？URN？域名？網址？

標題列舉了幾個名詞，不細究地話，多數的互聯網的使用者們仍是容易分不清的。這幾個東西有個共同點就是能經過瀏覽器輸入並訪問，而瀏覽器的輸入框也確實能接收很多東西，其中最基本的功能即是讓咱們輸入網址。所謂網址有兩層含義，一是直接使用網站服務器的ip地址，以及便於記憶的域名，輸入域名後瀏覽器會經過DNS得到該域名對應的ip地址。html

但咱們會發現，只輸入網址後，瀏覽器會自動在其前面加上http或https：咱們也會發現，咱們訪問的網站域名後面還會加上其餘一些東西。由於網址只是個地址，而咱們找到對方的服務器後，還要使用其服務、並進一步使用它的文件資源；使用什麼服務由雙方使用的應用協議如http決定，而使用該服務下的什麼資源就須要咱們能在浩如煙海的互聯網中標定該資源及其位置，這就產生了URL（統一資源定位符）。java

URL的格式由三部分組成：程序員

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

依次指示了服務類型、主機、端口及資源路徑，經過這樣的方式全網資源的位置就都有了標記，咱們只需在瀏覽器輸入一段URL便能查看資源。固然URL的直接使用者可能是程序員們，畢竟不少時候用戶都不須要本身完整地輸入URL，由於瀏覽器的歷史記錄、提示功能已經能至關迅速地判斷咱們要訪問什麼了。但做爲互聯網的使用者，每一個人都應瞭解到，正因有了URL，咱們才能方便地使用整個互聯網豐富多彩的資源和服務。web

扯了這麼多，那URL和URI、URN，又是什麼關係？其實很簡單，URL既負責標識資源又要指示其位置，而URN只負責標識資源名字，同時URL和URN都是URI的兩個子集，因此URI既能夠是URL、URN中一種，也能夠二者都是、都不是。總之，他們幾個間最大的區別就是有無包含位置信息、有無包含資源名，好比一個磁力連接magnet:?xt=urn:btih:abcdef就是一個URN也是個URI，但卻不是URL，由於不能經過它判斷你要下載的文件到底在哪臺服務器上。算法

data URI

如今，再來看看咱們爲改造chrome而輸入的那一行，好比：chrome

data:text/html, <html contenteditable>

可見其中並無標識位置，也沒有標識資源的名稱，因此它就只是一個URI，具體來說叫data URI。
其格式規定以下：segmentfault

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

<mime type>：要呈現的數據類型，默認text/plain
<charset>：使用的字符集，默認US-ASCII
base64：使用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~九、+、/。其特色就是把二進制數據編碼爲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服務提高性能而言，是大有好處的。

1. data URI scheme及其應用
2. 什麼是data URI scheme及如何使用data URI scheme
3. Data URI 應用場景小結
4. Data URI 詳解
5. Data URI scheme:data:image/jpeg;
6. Data URI Scheme,base64
7. Data URI scheme
8. Data URI scheme(轉)
9. 關於Data URI
10. 什麼是Data URI
更多相關文章...
• Maven Web 應用 - Maven教程
• XML 應用程序 - XML 教程
• TiDB 在摩拜單車在線數據業務的應用和實踐
• Flink 數據傳輸及反壓詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。