使用Data URIs来提高你的网站速度

2014-04-28阅读(4761)评论(2)牵着狗狗看MM

W3Cways.com 微信公众号

URI是什么?

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

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

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

说明:
data – 指代URI协议
mime type – 代表数据类型,如png图片则为image/png,若不说明,默认为text/plain
charset – 如果不使用base64,则使用charset指定的字符类(有关base64的信息:http://en.wikipedia.org/wiki/Base64)
encoded data – 对应的编码信息
你可以在你的HTML或者CSS代码中使用data URI,而不用理会这个文件的路径。例如,你可以在CSS中使用data URI来指定一个背景图像。

li {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...) no-repeat;
}

还可以在中的src属性中来使用data URIs

<img width="64" height="69" alt="Treehouse Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...">

URI data在线转换地址:http://www.abluestar.com/utilities/encode_base64/
PS:data URIs通常会很长!

浏览器支持

PC端

IE Firefox Chrome Safari Opera
8+ 2+ 4+ 3.1+ 9+

手机端:

Android Browser Blackberry Chrome for Android Firefox for Android IE Mobile Safari Opera Mobile
2.1+ 7+ 33 26 10 3.1 10+

具体可以查看: http://caniuse.com/datauri

Data URIs优点

  1. 减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。
  2. 对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽
  3. 对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。
  4. 可以把整个多媒体页面保存为一个文件。

Data URIs缺点

  1. 无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。
  2. 无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。
  3. 客户端需要重新解码和显示,增加了点消耗。
  4. 不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
  5. 不利于安全软件的过滤,同时也存在一定的安全隐患。
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 使用Data URIs来提高你的网站速度
分享到: 更多 (0)

评论 2

评论前必须登录!

 

  1. #1

    不实用啊!

    不好意思5年前 (2014-04-29)