DataURI详解

DataURI,不算新东西,却一直没用过,前些日子在webapp中用了点DataURI,就做了下相关的了解,看看到底适用不适用。

Data URI

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。格式如下:

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

其实整体可以视为三部分,即声明:参数+数据,逗号左边的是各种参数,右边的是数据。

声明:data:是URI的协议头,表明其资源是一个data URI;

参数:

  1. MIME type,表示数据呈现的格式,即指定嵌入数据的MIME。对于PNG的图片,其格式是:image/png,如果没有指定,默认是:text/plain;
  2. character set(字符集)大多数被忽略,默认是:charset=US-ASCII。如果指定是的数据格式是图片时,字符集将不再使用;
  3. base64,这一部分将表明其数据的编码方式,此处为声明后面的数据的编码是base64,我们可以不必使用base64编码格式,如果那样,我们将使用标准的URL编码方式(形如%XX%XX%XX的格式);

数据:这个encoded data部分为实际的数据,可能包含空格,但是无关紧要。

例如:aaarticlea/jpeg;base64,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" alt="" />

浏览器的支持暂且不说,因为没有做pc的,手机上的还是可以的啦。

优点和缺点

这两点相信大家都看眼烦了,那就把我认为重要的say下喽。

优点:

  1. 减少HTTP请求数
  2. 避免了图片重新上传,清理缓存的问题
  3. 运用在模版环境中时,省去了拷贝图片的步骤
  4. ……

缺点:

  1. 无法重复利用。img虽然是一个请求数,但是加载完后,如果还有N次引用,那还1,而DataURI却必须是N次了;
  2. 图片等资源转换为DataURI所用的Base64编码之后,文件大小增加了好多(通常50%-300%),想想下,如果服务器端不做Gzip压缩的话,那不是要……,压缩后倒是跟原本的差不多大小;
  3. 加载、解码后渲染,消耗内存和CPU,手机上还得耗电池呢啊;
  4. 浏览器限制;
  5. 这个也是最可气的,那么一大长串编码无疑是对自己优雅代码的一个摧残啊,有代码洁癖的你能忍么?
  6. ……

如何获得图片的base64编码

在网上搜了几个在线的图片转义为base64的,缺发现没几个好用的,而且记不住网址,下面推荐一个,http://www.pjhome.net/web/html5/encodeDataUrl.htm(原版的),最初见到的是在飘飘那里:http://labs.pufen.net/my_collection/datauri.htm

当然,这么好的东西自己也必须要收藏一份儿了啊,格桑的博客的地址http://aiyouu.net/tools/datauri.html,用的时候方便啊,有空了再改造下。

哦,忘了说怎么用了,直接把图片拖到页面里面就可以了。

手机端DataURI比外链资源慢6倍

好久之前(那时候我还在上学)鬼哥写过DataURI会多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍,那手机上呢?

mobify最新的测试数据:DataURI要比简单的外链资源要慢6倍。

详情点击访问:mobify

使用建议

  1. sprite能用还得用啊,DataURI的方法要慎用,对于Webapp,还是研究各种缓存技术;
  2. 个别不能sprite且质量小的图片可以用DataURI
  3. 对个别BT需求时可以用来做为替代img的方案
  4. ……(期待你来补充的哦)

最后:URI,不是URL

如果不仔细看,真的会误把data URI看成data URL,然后用URL的方式去理解URI,其实不然!

URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源。

其实URL是URI的子集,URI是uniform resource identifier的缩写。URI是用于获取资源,包括其附加的信息的一种协议。附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了。注意的是data URI不是URL,因为它并不包含资源的公共地址。

参考扩展阅读:

整理的不好,欢迎斧正!

DataURL详解--转自格桑blog的更多相关文章

  1. python os.path模块常用方法详解:转:http://wangwei007.blog.51cto.com/68019/1104940

    1.os.path.abspath(path) 返回path规范化的绝对路径. >>> os.path.abspath('test.csv') 'C:\\Python25\\test ...

  2. 类加载器详解 (转至http://blog.csdn.net/jiangwei0910410003/article/details/17733153)

    首先来了解一下字节码和class文件的区别: 我们知道,新建一个java对象的时候,JVM要将这个对象对应的字节码加载到内存中,这个字节码的原始信息存放在classpath(就是我们新建Java工程的 ...

  3. Linux——vi命令详解

    转载 Linux--vi命令详解   原文链接:https://blog.csdn.net/cyl101816/article/details/82026678 vi编辑器是所有Unix及Linux系 ...

  4. (转)Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

  5. iOS 单元测试之XCTest详解(一)

    iOS 单元测试之XCTest详解(一) http://blog.csdn.net/hello_hwc/article/details/46671053 原创blog,转载请注明出处 blog.csd ...

  6. Protocol Buffer技术详解(Java实例)

    Protocol Buffer技术详解(Java实例) 该篇Blog和上一篇(C++实例)基本相同,只是面向于我们团队中的Java工程师,毕竟我们项目的前端部分是基于Android开发的,而且我们研发 ...

  7. Protocol Buffer技术详解(C++实例)

    Protocol Buffer技术详解(C++实例) 这篇Blog仍然是以Google的官方文档为主线,代码实例则完全取自于我们正在开发的一个Demo项目,通过前一段时间的尝试,感觉这种结合的方式比较 ...

  8. Protocol Buffer技术详解(语言规范)

    Protocol Buffer技术详解(语言规范) 该系列Blog的内容主体主要源自于Protocol Buffer的官方文档,而代码示例则抽取于当前正在开发的一个公司内部项目的Demo.这样做的目的 ...

  9. logback 配置详解【讲解较全的博客网站】

    http://blog.csdn.net/haidage/article/category/812478 详解(一)http://blog.csdn.net/haidage/article/detai ...

随机推荐

  1. 什么是Ajax

    AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术. 使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest.通过 ...

  2. C# 二维数组相关知识记录

    //初始化一个数组 , ] { { , }, { , }, { , }, { , }, { , } }; //查某个字段的长度 print(name.GetLength()); //获得第一个字段的长 ...

  3. [NOIP2011] 聪明的质检员(二分答案)

    题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...

  4. Git学习笔记(Mac Linux系统)

    最近参与学校一个比赛,和队友一起做一个小项目,需要将代码传到Coding(国内git代码托管平台),因此这几天才正式入手git版本控制系统,在这里我就记录一下最近的学习git心得体验,一来分享一下自己 ...

  5. Linux makefile 教程 非常详细,且易懂

    最近在学习Linux下的C编程,买了一本叫<Linux环境下的C编程指南>读到makefile就越看越迷糊,可能是我的理解能不行. 于是google到了以下这篇文章.通俗易懂.然后把它贴出 ...

  6. 不能从const char *转换为LPCWSTR

    编译器有时候会根据编码方式来选择定义为LPCWSTR还是LPCTSTR LPSTR: 32bit指针 指向一个字符串,每个字符占1字节. 相当于 char *   LPCSTR: 32-bit指针 指 ...

  7. 查询expression的小工具

    今天在研究flipsolve的时候无意间写了个shelf tool,用于查询一大推节点中某些parameter的expression中是否存在我需要的关键字.就是简单的对所框选的节点进行一个循序查询参 ...

  8. 使用 openssl 生成证书

    一.openssl 简介 目前最流行的 SSL 密码库工具官网:https://www.openssl.org/source/ 构成部分 密码算法库 密钥和证书封装管理功能 SSL通信API接口 用途 ...

  9. ng-if ng-show ng-hide 的区别

    angularjs ng-if ng-show ng-hide区别 在使用anularjs开发前端页面时,常常使用ng-show.ng-hide.ng-if功能来控制页面元素的显示或隐藏,那他们之间有 ...

  10. linux下重置mysql的root密码

    # /etc/init.d/mysql stop # mysqld_safe --user=mysql --skip-grant-tables --skip-networking & # my ...