data URI scheme及其應用

data URI scheme通俗來講就是圖片直接塞到HTML而不是由HTTP。這樣從表面上看會降低一次HTTP的請求，實現了對于網頁的優化（只是看了其它一些文章data URI由于將圖片採用了base 64的編碼方式進行表達，所以還是須要進行HTTP去下載內容，并且這種渲染方式同一時候也加大了內存，cpu等等的壓力，因此選擇的時候須要進行性能方面的權衡）。

比方一張圖片用http請求方式進行請求而且顯示的方法：

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

相同的效果使用?data URI scheme?。將圖片轉化為Base64編碼方式后能夠這樣寫進html中，非常顯然會降低一次請求的耗時

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

當中。data - 取得數據的協定名稱；image/png - 數據類型名稱。base64 - 數據的編碼方法；iVBOR.... - 編碼后的數據

對于圖片的base 64編碼后的獲取方式，能夠用 PHP 的 base64_encode() 進行編碼，或者用canvas的toDataURL去獲得。

Data URL 盡管節省 HTTP 請求，可是倘若這個圖像要在網頁多個地方顯示的話。便會加大網頁的內容，延長了下載的時間。當中一個解決的方法是在一個 CSS class 中增加 data URL，在須要顯示圖像的區塊調用這個 class；

另外一個避免過多html內容造成http請求加重的方法是採用 Data URI+localstorage的方法來實現圖片資源的緩存，也就是將圖片轉化為base 64的字符串形式，配上圖片的過期信息組成json存儲到localstorage中。從而實現緩存的效果。

var imgAsDataURL = imgCanvas.toDataURL("image/png");