Data URI 应用场景小结

时间 2019-12-10

标签 data uri 应用场景小结繁體版

原文原文链接

Data URI scheme 在前端开发中是个经常使用的技术，一般会在 CSS 设置背景图中用到。好比在 Google 的首页就有用到：php

Data URI scheme 简称 Data URI，常常会被错误地写成 data URLs。笔者认为一般用于将图片 base64 编码的 Data URI 能够称为 data URLs，理由是这个地址（经过 base64 编码的 URL）能够在浏览器地址栏打开，并且 chrome 面板下也用了 "data URLs" 这个名称，可是广义的 Data URI 绝对不能够用 data URLs 来代替，毕竟 URL 只是 URI 的子集。css

若是你是第一次接触，可能会诧异于这一堆 "乱七八糟" 的编码是如何生成，打开 http://www.pjhome.net/web/html5/encodeDataUrl.htm，将任意一张图拖进去，便能自动帮你生成这串 "base64:URL"，接着即可以在任何须要用到图片 src 属性的地方，用这个字符串代替。html

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 文件来提升页面加载效率。html5

在开发过程当中，其实咱们不经常使用到 Data URI 来表示图片，在此我将其利弊进行了下汇总。web

利：chrome

减小 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）：服务器

Read More：