HTML之Data URL(转)
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img
标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。
1. Data URL基本原理
Data URL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9完全支持。
IE6/7是不支持Data URL技术。
2. 为什么Data URL是个好东西
Data URL能用在很多场合,跟传统的外部资源引用方式相比,它有如下独到的用处:
- 当访问外部资源很麻烦或受限时
- 当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时。
- 当图片的体积太小,占用一个HTTP会话不是很值得时。
Data URL也有一些不适用的场合
- Base64编码的数据体积通常是原数据的体积4/3,也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
- Data URL形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
然而,Data URL这些不利的地方完全可以避免或转化。本文的重点就是要讨论这个问题。
3. 在CSS里使用Data URL
当第一次看到Data URL的作用和用法时,你也许会很不疑惑,“为什么要麻烦的将图片转换成base64编码字符串,还要嵌入的网页中,将HTML代码弄的混乱不堪,甚至还会有性能上的问题。”
诚然,无法否认缓存在浏览器性能中的重要作用——如何能将Data URL数据也放入浏览器缓存中呢?答案是:通过CSS样式文件。CSS中的url
操作符是用来指定网页元素的背景图片的,而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以,我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。
假设我们的页面里有一个很小的div
元素,我们想用一种灰色的斜纹图案做它的背景,这种背景在当今的网站设计者中非常流行。传统的方法是制作一个3×3像素的图片,保存成GIF或PNG格式,然后在CSS的background-image
属性中引用它的地址。而Data URL则是一种更高效的替代方法,就像下面这样。
<style>
.striped_box {
width: 100px;
height: 100px;
background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
border: 1px solid gray;
padding: 10px;
}
</style>
<div class="striped_box lazy ">
这是一个有条纹的方块
</div>
4.Data URL 问题
说到Data URI的优点,自然少不了“减少链接数”,把图片转为Base64编码,以减少图片的链接数。我们先想当然一下,同样一张图片,如果不用发起一个下载请求,打开速度是会更快的。但是,有几个问题需要关注下:
- 图片始终是要下载的,那么下载一张图片的速度快还是下载一堆编码快?
- 浏览器对图片的显示,处理效率哪个更快?
- 图片的缓存问题
5.DataURL在Web浏览器中的兼容性总结
- IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL
- IE8 data URL 最大长度限制为32k字节,超出无效。IE9+没有这个限制
- IE只识别base64编码或百分号编码(URL编码, encodeURIComponent)的data URL,IE不识别无编码的data URL,非IE浏览器可识别无编码的data URL
- IE不支持对<iframe>,<frame>标签的src设置data URL
- IE官方说法说data URL仅支持以下5种使用场景:
- object (images only)
- img
- input type=image
- link
- CSS declarations that accept a URL
- 据本人实测,IE也在除了官方所述5种之外的其它场合支持data URL:
- a href
- meta refresh. 示例:
<meta http-equiv="refresh" content="5;URL=data:text/html;base64,xxxx....">
- script src
- window.open
- embed src
- 对于audio, video一类的元素,往往资源文件较大,使用data URL并不常见,我也没有对其进行测试。
- Firefox中粘贴截图是直接转换为data URL的图片,其它浏览器干脆无法粘贴,我记得以前Chrome好像可以粘贴截图的,今天再测Chrome,Opera都不能粘贴截图(<div contenteditable></div>做的测试). (粘贴截图常用于在线富文本编辑器)
- 可为data URL指定字符集编码。示例:data:text/plain;charset=US-ASCII,xxxx....
附录:
DataURL语法规则:
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
HTML之Data URL(转)的更多相关文章
- Data URL简介及Data URL的利弊
之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...
- Data URL
Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...
- 使用Visual Studio 2010写Data Url生成工具C#版本
声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编 ...
- HTML5——Data Url生成
HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- PHP & “Data” URL scheme(转)
基本上所有的对文件操作的API, 都迁移到的了PHP stream上, 所以, 绝大部分对文件操作的API都是支持Data URL的. 当某个API需要操作对象是文件的时候, 我们其实是可以采用Dat ...
- 【Data URL】【RE】【bugku】逆向入门writeup
在写wp之前先来了解一下Data URL是什么 Data URL 在浏览器向服务端发送请求来引用资源时,一般浏览器都有同一时间并发请求数不超过4个的限制.所以如果一个网页需要引用大量的服务端资源,就会 ...
- 使用Data URL将图片嵌入到网页中
早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...
- 【转】Data URL和图片,及Data URI的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...
- Data Url生成工具之HTML5 FileReader实现
百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader ...
随机推荐
- Unity3d 随机地图生成
2D解析图: 3D地形: 嘿嘿.
- 搭建一个 简易的php版 todolist
我记得以前使用 wunderlist 但是国外..后来用了半年. 挺方便的.但是.后来慢慢忘了这工具存在 缺少了todolist.效率折半.. so.我搭建了个简单的todolist. :mytin ...
- 为Ubuntu配置ssh服务 方便远程登陆
Ubuntu系统必须开启ssh服务后,XP或者其他的主机才可以远程登陆到Ubuntu系统. 1,安装软件包,执行sudo apt-get install openssh-server Ubuntu缺省 ...
- HDU 4717The Moving Points warmup2 1002题(三分)
The Moving Points Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- svn图形客户端:smartsvn,svnmanager,rapidsvn,svnworkbench,rabbitsvn,Esvn, trac
svn图形客户端: smartsvn,http://www.oschina.net/p/smartsvn, 不用安装直接运行 qsvn, http://www.oschina.net/p/qsvn r ...
- 字符串(后缀数组):POJ 3294 Life Forms
Life Forms Description You may have wondered why most extraterrestrial life forms resemble humans, d ...
- [Sequence Alignment Methods] Dynamic time warping (DTW)
本系列介绍几种序列对齐方法,包括Dynamic time warping (DTW),Smith–Waterman algorithm,Cross-recurrence plot Dynamic ti ...
- 算法对比:Prim算法与Dijskra算法
在图论中,求MST的Prim算法和求最短路的Dijskra算法非常像.可是我一直都对这两个算法处于要懂不懂的状态,现在,就来总结一下这两个算法. 最小生成树(MST)—Prim算法: 算法步骤: •将 ...
- Ring - HDU 2296(自动机+dp)
题目大意:斯蒂文想送给他女盆友一个戒指,并且他想在戒指上刻一些字,他非常了解他女盆友喜欢什么单词,比如"love""forvevr"....并且他还把女盆友喜欢 ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...