天天看点

最近学习的DATA URIS

1.URI是什么?

URI是uniform resource locator的简写,是一系列如何获得数据的协议。在一般的情况下,如果我们需要在HTML页面加入一个链接资源,如CSS、JavaScript文件或一个Image文件,其URL属性会告诉游览器去哪里下载这些文件,然后游览器会请求链接,然后下载这些文件。

为什么要说URL呢?不但是它们很像(我第一眼就把URI看成URL了),而且URL其实也是一种URI,URI是一种通过一定的信息来获得资源的协议,当这种信息为一个URL地址时,URI就表现为URL,但是今天讨论的主要不是这些。

2.怎么用?

URI的数据格式很简单,通过RFC 2397的定义,一般格式是:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

说明:data - 指代URI协议

        mime type - 代表数据类型,如png图片则为image/png,若不说明,默认为text/plain

        charset - 如果不使用base64,则使用charset指定的字符类(有关base64的信息:http://en.wikipedia.org/wiki/Base64)

        encoded data - 对应的编码信息

示例:12K JPG图片

<img src="data:image/pjpeg;base64,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" alt="180.jpg"/>

URI data在线转换地址:http://www.abluestar.com/utilities/encode_base64/index.php

3.浏览器支持

   Firefox 2+

   Opera 7.2+(数据不能长于4100 characters)

   Chrome (所有版本)

   Safari (所有版本)

   Internet Explorer 8+(数据必须小于32k)

4.我们关注的性能(来自秦歌)

       优点:

       1.减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。

       2.对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,

          那么就会降低带宽。

       3.对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在

          这方面的优势更明显。

       4.可以把整个多媒体页面保存为一个文件。

       缺点:

      1.无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。

      2.无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。

      3.客户端需要重新解码和显示,增加了点消耗。

      4.不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。

      5.不利于安全软件的过滤,同时也存在一定的安全隐患。

转载于:https://www.cnblogs.com/return/archive/2009/11/23/1608956.html