Data URI詳細介紹

時間 2019-11-08

標籤 data uri 詳細介紹简体版

原文原文鏈接

1、URI介紹

URI（統一資源標識符）是 uniform resource identifier的縮寫，它定義了接受內容的協議以及附帶的相關內容，若是附帶的相關內容是一個地址，那麼此時的 URI 也是一個 URL （uniform resource locator )。javascript

2、什麼是 data URI scheme？

Data URI scheme 簡稱 Data URI，常常會被錯誤地寫成 data URLs。即前綴爲data：協議的的URL，其容許內容建立者向文檔中嵌入小文件。php

假設咱們有一個圖片須要顯示在網頁上css

一、一般咱們會使用http連接，這種取得資料的方法稱爲 http URI scheme：html
// 從外部請求一張圖片 <img src="http://pic1.win4000.com/wallpaper/c/53cdd1f7c1f21.jpg" alt="">複製代碼
二、使用 data URI scheme 獲取資料能夠寫成：html5
// 在HTML中嵌入一個小紅點的圖片 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="">複製代碼
經過data RUI scheme，咱們把圖像內容內置在HTML 中，節省了一個 HTTP 請求。java

3、Data URI scheme 的語法

data:①[<mime type>]②[;charset=<charset>]③[;<encoding>]④,<encoded data>⑤web

【1】第①部分data： 協議頭，它標識這個內容爲一個 data URI 資源。瀏覽器

【2】第②部分MIME 類型（可選項）：瀏覽器一般使用MIME類型（而不是文件擴展名）來肯定如何處理文檔；所以服務器設置正確以將正確的MIME類型附加到響應對象的頭部是很是重要的。MIME類型對大小寫不敏感，可是傳統寫法都是小寫。緩存

類型	描述	示例（語法：type/subtype 類型/子類型）
text	代表文件是普通文件，理論上是人類可讀的	text/plain，text/html，text/css，text/javascript
image	代表文件某種是圖像文件，gif動態圖也屬於image類型	image/gif，image/png，image/jpeg，image/bmp，image/webp，image/x-icon，image/vnd.microsoft.icon
audio	代表文件是某種音頻文件	audio/midi，audio/mpeg，audio/webm，audio/ogg，audio/wav
video	代表文件是某種視頻文件	video/webm，video/ogg
application	代表文件是某種二進制數據	application/octet-stream，application/pkcs12，application/vnd.mspowerpoint，application/xhtml+xml，application/xml，application/pdf

【3】第③部分 [;charset=<charset>](可選項)： 源文本的字符集編碼方式，默認編碼是 charset=US-ASCII, 即數據部分的每一個字符都會自動編碼爲 %xxbash

【4】第④部分 [;<encoding>] ： 數據編碼方式（默認US-ASCII，BASE64兩種）

【5】第⑤部分 ,<encoded data> ：編碼後的數據

4、Data URI scheme 的利弊

利：

減小 HTTP 請求

當訪問外部資源很麻煩或受限時（好比服務器 ip 被牆）

當圖片是在服務器端用程序動態生成，每一個訪問用戶顯示的都不一樣時

當圖片的體積過小，佔用一個 HTTP 會話不值得時

沒有圖片更新要從新上傳，還要清理緩存的問題

弊：

Base64 編碼的數據體積一般是原數據的體積 4/3，也就是 Data URL 形式的圖片會比二進制格式的圖片體積大 1/3

Data URL 形式的圖片不會被瀏覽器緩存，這意味着每次訪問頁面時都被下載一次。

增長了 CSS 文件的尺寸

IE678兼容性

不適合 lazy loading

不利於維護

移動端不宜使用 Data URI 技術（解碼耗 CPU）

5、Data URI scheme 的應用實例

【1】在Html的Img對象中使用

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />複製代碼

【2】在Css的background-image屬性中使用

div.image {
    width:100px;
    height:100px;
    background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}複製代碼

【3】在Html的css連接處使用

<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />複製代碼

【4】在Html的javaScript連接處使用

<script src="data:text/javascript;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." type="text/javascript"></script>複製代碼

【5】data RUI scheme也能夠直接在瀏覽器的地址欄中輸入進行訪問

①在瀏覽器中輸入如下的Url，會獲得一個加粗的"Hello, world!"。也就是說，data:後面的數據直接用作網頁的內容，而不是網頁的地址。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>複製代碼

②下面的例子會顯示出 "你好，中文！"。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB複製代碼

6、兼容IE678 - MHTML

MHTML 即 MIME HTML（Multipurpose Internet Mail Extensions HyperText Markup Language），就是將Data URI以附件的形式附加到頁面頁面上，具體示例以下：

/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"

--_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--_ANY_SEPARATOR--
*/

.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground); 
}複製代碼

上面註釋的部分就是一個附件，這個附件的內容是一個名爲myidBackground的Base64編碼圖片，而後在class爲myid的css中使用。

注意：一、boundary字段值可自定義；

二、附件的末行必須爲boundary字段值；

三、附件內容不能被壓縮工具擦寫掉；

四、因爲高版本的IE在使用IE8兼容模式時能認識*這個css hack符號，但卻不支持mhtml，因此會致使背景圖片失效。應該採用IE的條件註釋更爲穩妥。