ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端：base64的作用 [打印本页]

作者: 伤心客 时间: 2024-12-24 02:31
标题: 前端：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
来源：稀土掘金
著作权归作者所有。商业转载请接洽作者得到授权，非商业转载请注明出处。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)