Data URI 应用场景小结
Data URI scheme 在前端开发中是个常用的技术,通常会在 CSS 设置背景图中用到。比如在 Google 的首页就有用到:
Data URI scheme 简称 Data URI,经常会被错误地写成 data URLs。笔者认为通常用于将图片 base64 编码的 Data URI 可以称为 data URLs,理由是这个地址(通过 base64 编码的 URL)可以在浏览器地址栏打开,而且 chrome 面板下也用了 "data URLs" 这个名称,但是广义的 Data URI 绝对不可以用 data URLs 来代替,毕竟 URL 只是 URI 的子集。
如果你是第一次接触,可能会诧异于这一堆 "乱七八糟" 的编码是如何生成,打开 http://www.pjhome.net/web/html5/encodeDataUrl.htm,将任意一张图拖进去,便能自动帮你生成这串 "base64:URL",接着便可以在任何需要用到图片 src 属性的地方,用这个字符串代替。
Data URI 的格式十分简单,如下所示:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
- 第一部分是 data: 协议头,它标识这个内容为一个 data URI 资源。
- 第二部分是 MIME 类型,表示这串内容的展现方式,比如:text/plain(默认),则以文本类型展示,image/jpeg,以 jpeg 图片形式展示,同样,客户端也会以这个 MIME 类型来解析数据。
- 第三部分是编码设置,默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx
- 第四部分是 base64 编码设定,这是一个可选项,base64 编码中仅包含 0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。
- 最后一部分为这个 Data URI 承载的内容,它可以是纯文本编写的内容,也可以是经过 base64编码 的内容。
我们先不管它的编码过程,可能你要问了,这么费尽周折是为了啥?这里就要说到 Data URI 最大的好处,减少 HTTP 请求。通常情况下我们在 HTML 页面中表示一张图片,会用一个 img 标签,然后将其 src 属性指向服务端的一个地址,每个 img 标签都会是一次请求;但是用了 Data URI 技术,将图片编码成字符串 "内嵌" 入 HTML 代码中(inline),然后在客户端完成解码工作,就不用进行 HTTP 请求了。但是这样做也有个明显的缺点,Data URI 无法进行缓存,于是聪明的工程师一般会把 Data URI 用在 CSS 中,因为 CSS 中的 URL 操作符是用来指定网页元素的背景图片的,而浏览器并不在意 URL 里写的是什么——只要能通过它获取需要的数据。所以,我们就有了可以将 Data URL 形式的图片存储在 CSS 样式表中的可能,而所有浏览器都会积极的缓存 CSS 文件来提高页面加载效率。
在开发过程中,其实我们不常用到 Data URI 来表示图片,在此我将其利弊进行了下汇总。
利:
- 减少 HTTP 请求
- 当访问外部资源很麻烦或受限时(比如服务器 ip 被墙)
- 当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时
- 当图片的体积太小,占用一个 HTTP 会话不是很值得时
- 没有图片更新要重新上传,还要清理缓存的问题
弊:
- Base64 编码的数据体积通常是原数据的体积 4/3,也就是 Data URL 形式的图片会比二进制格式的图片体积大 1/3(好在服务端有 gzip 压缩,压缩后和编码前图片大小差不多)
- Data URL 形式的图片不会被浏览器缓存,这意味着每次访问页面时都被下载一次。(这点可以通过应用在 CSS 中,缓存 CSS 文件解决)
- 增加了 CSS 文件的尺寸
- IE678兼容性,比如 Google 首页的语音搜索提示图在 IE8 下直接舍去了(http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/>)
- 不适合 lazy loading
- 不利于维护
- 移动端不宜使用 Data URI 技术(解码耗 CPU)
那么,究竟什么时候该用 Data URI 技术呢?
- 这类图片不能与其他图片以 CSS Sprite 的形式存在,只能独行
- 这类图片从诞生之日起,基本上很少被更新
- 这类图片的实际尺寸很小
- 这类图片在网站中大规模使用
最后推荐几个在线网址(image -> base64 URL):
- http://www.pjhome.net/web/html5/encodeDataUrl.htm
- http://www.atool.org/img2base64.php
- http://duri.me/
- http://dataurl.net/#dataurlmaker
Read More:
- 细说 Data URI
- Data URI&MHTML: 用还是不用?
- 移动端性能大比拼:CSS Sprites vs. Data URI
- JS魔法堂:Data URI Scheme介绍
- Data URI 最佳实践
- Data URIs (css-tricks)
Data URI 应用场景小结的更多相关文章
- intent-filter data Uri 意图过滤器 详解
组件的intent-filter属性 如果一个 Intent 请求在一片数据(Uri)上执行一个动作(Action), Android 如何知道哪个应用程序的哪个组件能用来响应这个请求 ...
- 【转】Data URL和图片,及Data URI的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...
- 前端-Data URI Scheme
了解Data URI scheme,首要要掌握一些URI.URL的基本知识,很多做移动端上开发的同学对这两个基本概念掌握的不够,本文首先会对这两个基本概念做一些简单的介绍. 基本概念 <HTTP ...
- 细说 Data URI
Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...
- JS魔法堂:Data URI Scheme介绍
一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...
- php://input,php://filter,data URI schema的那些事
一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件 ...
- data URI
参考资料:http://www.cnblogs.com/hustskyking/p/data-uri.html 与http,ftp等协议类似,data URL也是一种协议,不同的是它直接将数据(编码或 ...
- 网页优化URI(http URI scheme与data URI scheme)
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
随机推荐
- 网站添加数据出错,原来是MS SQL Server2008日志文件占据空间过大导致的
最近发现公司上线的八爪鱼招标网有部分功能出现问题,主要表现为无法向数据库插入数据:远程登陆到数据库服务器时,发现原本的40G空间都被数据库吃完了,于是打开MS SQL Server 2008对数据库进 ...
- PHP 类型判断和NULL,空值检查
PHP是一种宽松类型的编程语言,在函数中对传入的参数值的“类型”以及”值是否为空或者NULL“进行检查是不可缺少的步骤. 类型检查 从PHP5开始,PHP允许对函数的参数进行类型约束,即可以约束参数的 ...
- jqGrid 学习笔记--数据异步加载方法(转)
var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...
- c# 请求api获得json数据
public static string HttpGet(string Url) { HttpWebRequest request = (HttpWebRequest)WebRequest.Creat ...
- 金士顿U盘,群联PS2251-60主控,量产还原教程
还原成一个可移动磁盘教程,只是在"分区设置"中将 "模式=21" 改为 "模式=3" 即可. 1. 打开:"MPALL_F1_90 ...
- Tomcat源码分析之—具体启动流程分析
从Tomcat启动调用栈可知,Bootstrap类的main方法为整个Tomcat的入口,在init初始化Bootstrap类的时候为设置Catalina的工作路径也就是Catalina_HOME信息 ...
- cookie工具类,解决servlet3.0以前不能添加httpOnly属性的问题
最近在解决XSS注入的问题,由于使用的servlet版本是2.5,不支持httpOnly的属性,故做了个工具类来实现cookie的httpOnly的功能.全类如下: /** * cookie工具类,解 ...
- 跨应用程序域(AppDomain)的单例(Singleton)实现
转载自: 跨应用程序域(AppDomain)的单例(Singleton)实现 - CorePlex代码库 - CorePlex官方网站,Visual Studio插件,代码大全,代码仓库,代码整理,分 ...
- 怎样在ZBrush中快速绘制人体躯干
之前我们对人体骨点的雕刻,了解了人体骨骼比例结构特征.今天的ZBrush教程将通过ZBrush®遮罩显示的特点对模型的人体躯干进行细致雕刻.文章内容仅以fisker老师讲述为例,您也可以按照自己的想法 ...
- 洛谷P1120小木棍[DFS]
题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度. 给出每段小木棍的长度,编 ...