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");