Data URI Scheme介绍及支持的类型

什么是Data URI Scheme?

Data URI scheme 简称 Data URI,是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

或许你已经注意到,在有的网页上,图片的 src 或 css 背景图片的 url 并不是我们常见的在线图片链接,而是一大串的字符,比如像这样:data:image/gif;base64,base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

什么是Base64 编码?

Base64是一种编码方式,这个术语最初是在"MIME内容传输编码规范"中提出的。Base64不是一种加密算法,它实际上是一种"二进制转换到文本"的编码方式,它能够将任意二进制数据转换为ASCII字符串的形式,以便在只支持文本的环境中也能够顺利地传输二进制数据。

(1)base64编码:把二进制数据转为字符;

(2)base64解码:把字符转为二进制数据;

Base64 常用于处理文本数据的场合,表示、传输、存储一些二进制数据。

Data URI 如何使用?

(1)可以作为iscript/img/video/iframe等元素的src属性

js 复制代码
var scriptDataURL = `data:text/javascript;base64,YWxlcnQoJ+WcqHNjcmlwdOS4reS9v+eUqERhdGEgVVJMJykK`
// 对应文本为:alert('在script中使用Data URL')
$('#setDataURLInScriptBtn').click(function () {
  $('<script>').attr('src', scriptDataURL).appendTo($('body'))
})

(2)可以在 CSS 中使用

js 复制代码
body { 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");
}

(3)在浏览器地址栏中使用

js 复制代码
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC

(4)在标签的href中使用

js 复制代码
var linkDataURL = `data:text/css;base64,I3NldERhdGFVUkxJbkxpbmtCdG57Y29sb3I6IHJlZDt9Cg==`
//对应内容为:setDataURLInLinkBtn{color: red;}
$('#setDataURLInLinkBtn').click(function () {
  $('<link rel="stylesheet" type="text/css">').attr('href', linkDataURL).appendTo($('head'))
})

Data URI 哪些场景适用?

  • 图片体积较小,没必要浪费一次http请求
  • 访问外部资源受限或者很麻烦的情况
  • 外部图片为动态的

Data URI 的优点:

  1. 减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。
  2. 对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽。
  3. 对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。
  4. 可以把整个多媒体页面保存为一个文件。
  5. 当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时

Data URI 的缺点:

  1. 在HTML上不能复用,要复用只能放在CSS和JavaScript里
  2. 无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。
  3. 客户端需要重新解码和显示,增加了点消耗。
  4. 不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
  5. 不利于安全软件的过滤,同时也存在一定的安全隐患。
  6. 移动端不宜使用 Data URI 技术(解码耗 CPU)。
  7. 不合适 lazy loading,不利于维护

Data URI Scheme支持的类型

  1. data:,文本数据
  2. data:text/plain,文本数据
  3. data:text/html,HTML代码
  4. data:text/html;base64,base64编码的HTML代码
  5. data:text/css,CSS代码
  6. data:text/css;base64,base64编码的CSS代码
  7. data:text/javascript,Javascript代码
  8. data:text/javascript;base64,base64编码的Javascript代码
  9. data:image/gif;base64,base64编码的gif图片数据
  10. data:image/png;base64,base64编码的png图片数据
  11. data:image/jpeg;base64,base64编码的jpeg图片数据
  12. data:image/x-icon;base64,base64编码的icon图片数据
相关推荐
aha-凯心29 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636022 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端