網頁優化URI（http URI scheme與data URI scheme）

網頁優化的一大首要任務是減小HTTP 請求 (http request) 的次數，例如經過合併多個JS文件，合併CSS樣式文件。除此以外，還有一個data URL 的密技，讓咱們直接把圖像的內容崁入網頁裏面，這個密技的官方名稱是 data URI scheme。



Goolge Wave 中CSS定義的圖片URL所有是 data URI scheme！那什麼是 data URI scheme？

假設你有如下的圖像：

A把它在網頁上顯示出來的標準方法是：

<img src="http://sjolzy.cn/images/A.png"/>

這 種取得資料的方法稱爲 http URI scheme ，一樣的效果使用 data URI scheme 能夠寫成：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

換句話說咱們把圖像檔案的內容內置在 HTML 檔案中，節省了一個 HTTP 請求。



data URI scheme 的語法

咱們來分析一下這句 img 標籤的語法：

<img src="data:image/png;base64,iVBOR....>

它包含一下部分：

data - 取得數據的協定名稱

image/png - 數據類型名稱

base64 - 數據的編碼方法

iVBOR.... - 編碼後的數據

: , ; - data URI scheme 指定的分隔符號



Base64 編碼？

不知道什麼是 base64 嗎？簡單地說它把一些 8-bit 數據翻譯成標準 ASCII 字符，往上有不少免費的 base64 編碼和解碼的工具，你也能夠用 PHP 的 base64_encode() 進行編碼：

echo base64_encode(file_get_contents('check.png'));在 CSS 中使用 data URL



data URI scheme 也能夠在 CSS 中使用，例如：

body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}



瀏覽器會緩存這種圖像嗎？

不會，Data URL 雖然節省 HTTP 請求，可是假若這個圖像要在網頁多個地方顯示的話，便會加大網頁的內容，延長了下載的時間，其中一個解決辦法是在一個 CSS class 中加入 data URL，在須要顯示圖像的區塊調用這個 class，例如：

.logobg { background: url(data:…)}<div class=」navigation logobg」>..helo, hello<div class=」footer logobg」>…又 是 IE 來搞破壞任何精采的技巧均可能受到 IE 的排擠，此次也有這種狀況，IE8 以前的版本都不支援 data URI scheme。

解決這個問題的辦法有：使用MHTML 解決 data URI scheme 的瀏覽器兼容問題