`

data类型的Url格式

 
阅读更多
   今天在浏览网站时发现了一个很奇妙的实现，于是就看了下页面的源码，发现页面中引入了一个很奇怪的URL（data:image/jpeg;base64,/9j/4QecRXhpZgAATU0AKgAAAAgABwESAAMA...）,在chrome浏览器的network下看了下，确实发了一个这样的请求，但是没有指定ip，没有请求头，没有响应头，只有一大串字符串，请求会发去哪里呢？好奇的在google上搜了下，原来这是一种data类型的URL格式，可以把小数据直接嵌入到URL中，浏览器会自动解析data：后面的数据。

例如：在浏览器的地址栏中输入 

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
就会在浏览器中看到Hello，world!,也就是data:text/html后面的数据直接用做网页的内容，而不是网页的地址。

再例如：
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D

会在浏览器中看到一张1×36的png图片。

在上面的data url中，data表示取得数据的协定名称，image/png是数据类型名称，base64是数据的编码方法，关于base64是网络上最常见的用于传输8bit字节代码的编码方式之一，可用于在http环境下传递较长的标识信息，逗号后面就是这个image/png文件base64编码后的数据。

目前data类型的url支持的类型有：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

　　base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小，而且不会缓存图片。所以对“小”数据特别有好处。
分享到：
| 8个能够有效帮助你提高jQuery代码性能的技 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics