前端：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位的字节（38=24）转化为4个6位的字节（46=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用’=‘，因此编码后输出的文本末尾可能会出现1或2个’='。
为了保证所输出的编码位可读字符，Base64制定了一个编码表，以便进行统一转换。编码表的大小为2^6=64，这也是Base64名称的由来。(下面是Base64编码表)

作者：Morakes
链接：https://juejin.cn/post/7168809452508807182
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。