前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？

相信无论是前端还是后端开发工程师，对于Base64都不会感到陌生，在开发中我们经常会将一些小图片以Base64的形式存储和加载。然而知其然也要知其所以然，Base64究竟是什么，我们为什么要使用Base64，以及Base64的优缺点又是什么呢？今天我们就来聊一聊。

什么是Base64

首先Base64是一种编码格式，普遍应用于需要在网络中存储和传输的二进制数据。为什么叫Base64呢，主要是因为这种编码格式每个字节的前两位只能是0，剩下只有6位可以表示，所以对于Base64来说，一个字节只能表示64种情况。Base64的名字由此而来。

为什么要存在Base64

但我们不难发现，这样的话这种编码格式并不能充分利用存储资源，是比较低效的，那为什么还要用Base64这种编码呢？为什么不直接传输二进制而要转成Base64格式再去传输呢？

原因是因为base64最早是用在邮件传输协议中的，当时邮件传输协议只支持ascii字符传递，ascii码可以用来表示所有的英文字符和数字还有一些符号，但其中还存在很多不可见字符或者叫控制字符，不可见字符在传输过程中可能会产生一些错误，如果邮件中只传输英文数字等，那么ascii是可以直接支持不会有问题，但是如果你要在文件中传输一些二进制文件，图片，视频等资源的时候，不可避免的转成ascii的时候会出现非英文数字的情况，也就是上面所说的不可见字符，这时就有可能会导致传输过程中出现问题。

Base64就是用来解决这个问题的，人们想到把二进制划分为多个3个字节的块，把每3个字节(24位)转换成4个6位，每个六位根据查表对应一个ASCII符号。如下图所示：

上图是Base64的编码字典

如上图所示，比如我们有一个3个字节的数据，转成ascii码以后就是第一行所示，但我们查询ascii码会发现第三个字节是个不可见字符，所以如果在曾经的邮件传输协议中这么传输可能会在过程中产生一些错误，于是我们需要转成base64再去传输，根据Base64的转化规则曾经的三个字节就变成了4组6位的值，然后我们需要在每一组前面补充两个0补齐字节长度。于是根据Base64编码之后我们打印出的结果就是S3qb这个字符串。

另外这个例子比较特殊，我们正好是个3字节数据，如果1个字节或者2个字节时，我们就会发现位数不能正好被6整除，不能整除就会是下面这个示例展示的样子

如何编码和解码Base64

在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串。btoa() — 字符串转 Base64编码

atob() — 通过Base64规则解码成ascii字符串

使用Base64存储和加载图片好不好？

相信大家对于Base64的编解码和原理已经有了深入了解，最后我们简单聊聊在前端页面中使用Base64加载图片到底好不好。所有事情都有两面性，没有绝对的好不好，只有在某些特定场景下合不合适。我们来看看Base64加载图片的优劣点：

资源大小：根据我们上面提到的原理，我们很容易发现Base64会比正常资源要大三分之一，Gzip压缩之后差距会缩小。

缓存方式：图片资源很好缓存，但如果是base64的话，如果是在cssjs中引入可以跟文件一起进行缓存，如果在html中直接引用则必须缓存html文件，所以缓存方便程度上肯定是图片资源文件更方便缓存。

加载方式：html/css中引入base64会导致文件体积变大，从而导致首屏展示的比较慢，而用过图片资源方式异步引入会首屏会展示的比较快。但对于需要加载很多图片的情况下，尤其是脚在很多小图片小icon的情况下，如果不使用雪碧图的方式就会造成请求量很大，在http1.1/1.0协议下，在不开启keep-alive的情况下，会导致效率低下重复创建销毁连接通道，并且浏览器存在请求线程限制，并且存在网络io延迟，这种情况下base64效率更高，但如果你的应用使用http2/3的协议，base64的优势就不大了。

结语

所以综合来看Base64加载图片的方式多数情况下并不是最优选择，只有在图片比较小，比较独立并不适合做成雪碧图的情况下再去使用比较好。
————————————————
版权声明：本文为CSDN博主「weixin_39765209」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39765209/article/details/112835049

前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？相关推荐

微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
Android Glide加载图片成圆形
今天,简单讲解android使用glide加载图片成圆形. 这个很简单,因为之前需要在RecyclerView里加载圆形图片,所以在网上查找了资料,很简单就解决了. 1.导入依赖 implementa ...
Android ListView 异步加载图片
使用ListView.GridView来展示图片是项目中经常遇到的情况,这里使用官方文档的BitmapFun稍作修改实现ListView 异步加载图片效果. 实现原理:给ListView 注册一个滚 ...
android glide圆形图片,Android Glide加载图片成圆形
释放双眼,带上耳机,听听看~! 今天,简单讲解android使用glide加载图片成圆形. 这个很简单,因为之前需要在RecyclerView里加载圆形图片,所以在网上查找了资料,很简单就解决了. 1 ...
Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）
android 应用中,如欢迎指引页面, 和图片轮播功能, 或者更多的内容在一页显示不了,要分成多个页面,这时候viewpager是很好用的. 首先看下效果: 下面是一个例子,带异步网络加载图片,并带 ...
Flash 与课件制作：加载图片
Flash 与课件制作:加载图片今天下午写了一下这个简单的东西,加载图片.今晚我们玩一下课件的制作,flash 制作课件是一个很实用的东西,能够制造很多动态的效果.当然要制作这些东西花费时间也不少. ...
Android实现异步从网络加载图片列表
博文出处:http://blog.csdn.net/carterjin/article/details/7995935 有时会有在加载ListView的时候,包含用户头像或其他需要到网络获取的图 ...
html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
yolov3前向传播（三）-- 坐标转换,iou计算,权重加载,图片显示
坐标转换,iou计算,权重加载,图片显示一.坐标转换 1.分析 2.实现 # =====================================坐标值转化函数================ ...

前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？

前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？相关推荐

最新文章

热门文章