利用 Data URL 加速你的網頁

對優化網頁效能有研究的人都知道,首要的任務是盡量減少 HTTP 請求 (http request) 的次數,例如把多個 JavaScript 檔案合併,把多個 CSS 檔案合併,利用 CSS 精靈和合併的小圖示等等,但是很多人都不知道還有一個 data URL 的密技,讓我們直接把圖像的內容崁入網頁裡面,這個密技的官方名稱是 data URI scheme

甚麼是 data URI scheme?

假設你有以下的圖像:

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

<img src="http://www.hkpug.net/files/images/check.png"/>

這種取得資料的方法稱為 http URI scheme,同樣的效果使用 data URI scheme 可以寫成:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

換句話說我們把圖像檔案的內容內置在 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,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

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

不會,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,


想在手機閱讀更多網站設計及開發資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems