前端:base64的作用

背景

项目中发现,img标签中写src,读取一个png图片,只有16kb,速度特别慢。

解决办法,将图片转为base64,然后读取,速度特别快17ms就解决。

定义:base64是一种基于64个可打印字符(A-Z、a-z、0-9、+、/)来表示二进制数据的表示方法,末尾用=做后缀。

Base64 的应用场景包括:

常用于在 HTTP 协议中传输二进制数据。

例如音乐文件里面保存一张封面图片,就是通过 base64 来进行保存。

就是把一张图片或文件,变成一串字符串,这样就可以直接把这个字符串保存到数据库中

这种编码通常用于在网络中传输二进制数据,如图片或文件。

base64对于前端来说并不陌生,在性能优化方面,base64经常被用于小图片的转化,从而达到减少http请求,使得页面的性能变得越来越好

  • 优点

因为它可以避免数据在不同系统间传输时被误解或破坏;

同时无需借用一个空间进行存储,然后再通过地址获取到这个图片或者文件资源。

  • 缺点
    通过base64转化后,体积会大了 1/3 。
    虽然Base64编码可以在一定程度上隐藏原始数据,但它并不提供任何加密功能。如果需要保护数据内容的安全,还需采用其他的加密技术。因为它的编码与解码过程是确定且公开的

如何转?

js中有个办法window.btoa可以直接转换成base64,window.atob转成字符串。

var encodedData = window.btoa("Hello, world"); // SGVsbG8gV29ybGQ= var decodedData = window.atob(encodedData);

扩展

最近在开发中遇到文件上传采用Base64的方式上传,记得以前刚开始学http上传文件的时候,都是通过content-type为multipart/form-data方式直接上传二进制文件,我们知道都通过网络传输最终只能传输二进制流,所以毫无疑问他们本质上都是一样的,那么为什么还要先转成Base64呢?这两种方式有什么区别?带着这样的疑问我们一起来分析下。

本文最后再来总结对比下这两种文件上传的方式优缺点。

(1)multipart/form-data可以传输二进制流,效率较高,Base64需要编码解码,会耗费一定的性能,效率较低。

(2)Base64不受请求方式的限制,灵活度高,http文件二进制流方式传输只能通过multipart/form-data的方式,灵活度低。

因为随着机器性能的提升,小文件通过二进制流传输和字符串传输,我们对这两种方式时间延迟的感知差异并不那么明显,因此大部分情况下我们更多考虑的是灵活性,所以采用Base64编码的情况也就比较多。

作者:初心不改_1

链接:https://juejin.cn/post/7251131990438264889

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

算法原理

Base64编码要求把3个8位的字节(3_8=24)转化为4个6位的字节(4_6=24),之后在6位的前面补两个0,形成8位一个字节的形式。 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。

为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。(下面是Base64编码表)

作者:Morakes

链接:https://juejin.cn/post/7168809452508807182

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐
Danny_FD几秒前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip6 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济11 分钟前
后端程序员的CSS复习
前端
Enddme14 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员15 分钟前
微信小程序使用 Tailwind CSS version 3
前端
溟洵38 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271143 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心43 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌44 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
三小河1 小时前
contentEditable 实现可编辑区域
前端