DataUrl简介（base64图⽚编码）
Data Url简介（base64图⽚编码）
1. Data Url简介
Data URL给了我们⼀种很巧妙的将图⽚“嵌⼊”到HTML中的⽅法。跟传统的⽤img标记将服务器上的图⽚引⽤到页⾯中的⽅式不⼀样，在Data URL协议中，图⽚被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本⽂中，我将介绍如何巧妙的使⽤Data URL优化⽹站加载速度和执⾏效率。
2. Data URL基本原理
图⽚在⽹页中的使⽤⽅法通常是下⾯这种利⽤img标记的形式：
<img src="images/myimg.gif ">
这种⽅式中，img标记的src属性指定了⼀个远程服务器上的资源。当⽹页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送⼀次拉取资源请求，占⽤⽹络资源。⼤多数的浏览器都有⼀个并发请求数不能超过4个的限制。这意味着，如果⼀个 ⽹页⾥嵌⼊了过多的外部资源，这些请求会导致整个页⾯的加载延迟。⽽使⽤Data URL技术，图⽚数据以base64字符串格式嵌⼊到了页⾯中，与HTML成为⼀体，它的形式如下：
从上⾯的base64字符串中你看不出任何跟图⽚相关的东西，但下⾯，我们将传统的img写法和现在的Data URL⽤法左右对⽐显⽰，你就能看出它们是完全⼀样的效果。但实际上它们是不⼀样的，它们⼀个是引⽤了外部资源，⼀个是使⽤了Data URL。
3. 浏览器⽀持情况
⼏乎所有的现代浏览器都⽀持Data URL格式，包括⽕狐浏览器，⾕歌浏览器，Safari浏览器，opera浏览器。IE8也⽀持，但有部分限制，IE9完全⽀持。
4. Data Url优势
减少链接数，图⽚转为Base64编码，以减少图⽚的链接数，从⽽减少http请求次数。
5. Data Url劣势
Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图⽚会⽐⼆进制格式的图⽚体积⼤1/3（数据体积增⼤）Data URL形式的图⽚不会被浏览器缓存，这意味着每次访问这样页⾯时都被下载⼀次。这是⼀个使⽤效率⽅⾯的问题——尤其当这个图⽚被整个⽹站⼤量使⽤的时候。（不会被缓存，可以把图⽚处理成背景background，利⽤浏览器的css样式的缓存）
6. 总结以及疑问
说到Data URI的优点，⾃然少不了“减少链接数”，把图⽚转为Base64编码，以减少图⽚的链接数。我们先想当然⼀下，同样⼀张图⽚，如果不⽤发起⼀个下载请求，打开速度是会更快的。但是，有⼏个问题需要关注下：
1. 图⽚始终是要下载的，那么下载⼀张图⽚的速度快还是下载⼀堆编码快？
2. 浏览器对图⽚的显⽰，处理效率哪个更快？
url编码处理
3. 图⽚的缓存问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。