網頁優(yōu)化的一大首要任務是減少HTTP 請求 (http request) 的次數(shù),例如通過合并多個JS文件,合并CSS樣式文件。除此之外,還有一個data URL 的密技,讓我們直接把圖像的內容崁入網頁里面,這個密技的官方名稱是 data URI scheme 。
什么是 data URI scheme?
假設你有以下的圖像:
A
把它在網頁上顯示出來的標準方法是:
XML/HTML Code復制內容到剪貼板
<img src="http://huoche.7234.cn/images/jb51/mrwbbpvbqh4.png"/>
這 種取得資料的方法稱為 http URI scheme ,同樣的效果使用 data URI scheme 可以寫成:
XML/HTML Code復制內容到剪貼板
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
換句話說我們把圖像檔案的內容內置在 HTML 檔案中,節(jié)省了一個 HTTP 請求。
Data URI scheme 的語法
我們來分析一下這句 img 標簽的語法:
XML/HTML Code復制內容到剪貼板
<img src="data:image/png;base64,iVBOR….>
它包含一下部分:
data – 取得數(shù)據(jù)的協(xié)定名稱
image/png – 數(shù)據(jù)類型名稱
base64 – 數(shù)據(jù)的編碼方法
iVBOR…. – 編碼后的數(shù)據(jù)
: , ; – data URI scheme 指定的分隔符號
Base64 編碼?
不知道什么是 base64 嗎?簡單地說它把一些 8-bit 數(shù)據(jù)翻譯成標準 ASCII 字符,往上有很多免費的 base64 編碼和解碼的工具,你也可以用 PHP 的 base64_encode() 進行編碼:
PHP Code復制內容到剪貼板
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 雖然節(jié)省 HTTP 請求,但是倘若這個圖像要在網頁多個地方顯示的話,便會加大網頁的內容,延長了下載的時間,其中一個解決辦法是在一個 CSS class 中加入 data URL,在需要顯示圖像的區(qū)塊調用這個 class,例如:
CSS Code復制內容到剪貼板
.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…
又 是 IE 來搞破壞
任何精采的技巧都可能受到 IE 的排擠,這次也有這種情況,IE8 之前的版本都不支援 data URI scheme。
新聞熱點
疑難解答