Data URI scheme 实现数据的URI访问

       网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数，例如通过合并多个JS文件，合并CSS样式文件。浏览器每下载一个图档或CSS就会触发一个HTTP request，而每个HTTP流程都会额外产生HTTP Header、TCP/IP Header等​​资料量，data URI scheme则是将文件Base64编码内嵌在网页中不额外触发HTTP request，Page speed更快速有效率。除此之外，还有一个data URL 的密技，让我们直接把图像的内容崁入网页里面，这个密技的官方名称是 data URI scheme 。
      假设你有以下的图像：A
      把它在网页上显示出来的标准方法是： <img src="http //sjolzy cn/images/A.png"/>
      这 种取得资料的方法称为 http URI scheme ，同样的效果使用 data URI scheme 可以写成：
      <img src="data:image/png;base64,iVBORw0KGgoAAAAN......" />
      换句话说我们把图像档案的内容内置在 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
      body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhE.......CC");}
 
      缺点
      Base64会使文件内容增加约33% 
      data URI不会被浏览器缓存
      如果有需要在多个地方重复使用时请避免或使用CSS载入
      内容如果更新，就需要重新产生一次编码
      data URI会使CSS和HTML看起来变得凌乱
      大小限制，根据data URI的规范，data URI有字元的限制，IE8仅支援32768 Bytes，约32KB左右
      IE8以下不支援，但可以透过使用CSS Hack解决