浏览器还 data URI协议-白红宇

浏览器还 data URI协议

阅读量：6489 次

发布时间：2019-06-24

本文共 1173 字，大约阅读时间需要 3 分钟。

一般浏览器引用资源时，都是用http和https协议，部分浏览器和所有的ftp软件都会使用ftp协议，引用本地文件会使用file协议，此外还有mms、thunder等各种协议。

不过刚才突然发现Firefox、Chrome和Opera等浏览器还支持（IE 6不支持），格式非常简单：

data:资源类型;编码,内容

简单来说，要生成一个html资源，可以这样：

data:text/html;ascii,<html><title>hello</title><body>world</body></html>

你把上面的链接复制到浏览器地址栏，打开就能看到效果了。

而2进制文件，例如图像、视频和音乐一般是使用base64编码，这会导致体积增大1/3。

例如要显示一个8×8像素的全黑图片，可以这样：

data:image/bmp;base64,Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==

实际上它还可以作为img等元素的src属性，如果你用支持data协议的浏览器的话，应该可以看到一张图：

如果看不到图的话，赶紧抛弃你那丢人的浏览器吧。

不得不提的是，我觉得它并不合适常规应用，因为存在几个严重问题：

base64编码会增大1/3体积，占用更多带宽。

浏览器解析时，会消耗更多的CPU资源，并可能占用更多内存。（这个和浏览器的实现有关，不过至少得多一次base64解码。）

无法让浏览器缓存图像，只能缓存引用它的文件。

在HTML上不能复用，要复用只能放在CSS和JavaScript里。

如果把背景图片写在CSS或JavaScript里，在下载完CSS和JavaScript之前，浏览器是完全停止解析和渲染的，而常规的引用外部图片的方式是可以并行下载的。

但是如果用来生成缩略图却不错，因为不需要在服务器端生成和维护一张临时图片。

最后说下如何用Python生成data URI协议的链接：

import base64img = open('kirino.jpg', 'rb') # 打开你要转换的图，文件名自己改content = img.read() # 读取内容out = open('result.txt', 'wb') # 打开输出文件，文件名自己改out.write('data:image/jpeg;base64,') # 输出头部，MIME类型自己改out.write(base64.b64encode(content)) # 输出base64编码后的文件内容

然后打开result.txt，里面就是结果了＝。＝