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