前端理解base64

一、背景：ascii码

字符=>二进制

计算机中所有数据的存储都是以二进制模式，比如想要存储abcd需将其转化为二进制，具体用哪些二进制来表示哪个符号*，有一个统一的编码规则，这就是ascii。

ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。（2的八次方=256，8个bit可以用来表示0-255）

0-127可以表示大小写的26个字母、加减乘除符号、阿拉伯数据还有控制字符比如换行符等。

观察百度百科上的ascii码表（128个字符）可以发现第八位都是0，等于没用第八位。因为英语中128个字符即可表示所有。

ascii大小规则
0-9<A~Z<a-z。

但如果是其他语言，比如法语128个不够。于是欧洲国家决定启用闲置的第八位，这样就有256个了。不过不同的国家有不同的字母，后128位同一编码在不同语言中代表不同的字符。注意前128位是一样的。

至于亚洲国家比如汉字就太多了，一个字节不够，必须采用多个字节代表一个符号。比如，简体中文常见的编码方式是GB2312，使用两个字节表示一个汉字，所以理论上最多可以表示 256 x 256 = 65536 个符号。

二、base64基本介绍

二进制=>字符

1.作用

base64编码是从二进制=>字符的过程。
采用Base64编码具有不可读性，需要解码后才能阅读。但是base64不是加密，只是一种可被翻译的编码。
Base64编码可用于在HTTP环境下传递较长的标识信息，用作HTTP表单和HTTP GET URL中的参数。
当需要把二进制数据放到url中时，采用base64具有不可读性比较合适

2. 使用原因

ascii码的128～255之间的值是不可见字符。而在网络上交换数据时，比如说从A地传到B地，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以就先把数据先做一个Base64编码，统统变成可见字符，这样出错的可能性就大降低了

3. 如何生成

01000100010011101100111010111100011001010…那么我们取6个比特为一组，计算它的ascii值，得到一个字符，这个字符肯定是可见字符，好，把它对应的字符写出来，再取6个比特，计算…，如此下去，直到最后，就完成了编码。

4. 其他

标准base64只有64个字符（英文大小写、数字和+、/）以及用作后缀等号。如下为base64对照表。注意和ascii表是不一样的！
6bit为一组，那么4个base64字符即表示了24bit，即3个字节（24/8=3）。可理解为，原先用二进制只需要3个字节表示的信息，用base64却要占4个字符（即四个字节）。

有点绕，举例吧

转换前 10101101,10111010,01110110 （二进制）

转换后（每六个为一组转为ascii码，ascii码就是8位的二进制）00101011, 00011011 ,00101001 ,00110110 （二进制）

十进制：43 27 41 54

对照base64表转为可见字符： r b p 2

计算机存储信息都是按ascii码来的，所以这四个字符在ascii码中是四个字节。原先3个字节的信息现在占位4个字节了，所以base64传输会使得信息变大，为原来的4/3

刚才说了base64可以用在url里，但是标准的Base64并不适合直接放在URL里传输，因为URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式。为解决此问题，可采用一种用于URL的改进Base64编码，它不仅在末尾去掉填充的’='号，并将标准Base64中的“+”和“/”分别改成了“-”和“_”。

三、图片Base64编码

1 图片的base64编码是什么

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串表示图片，从而无需图片地址。

这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。

比如下图的图标

浏览器解析html到灰色标注的img那里，就会向src所在地址发一个请求，请求这个图片，下图即为发出的请求。

不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 就可以。这里等于把图片变为一串编码，直接嵌在html里传递给了浏览器，浏览器不用再次请求图片了。

举个栗子。www.google.com 的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到：

//在css里的写法
#fkbx-spch, #fkbx-hspch {background: url(https://img-blog.csdnimg.cn/2022010706012410164.gif) no-repeat center;
}
//在html代码img标签里的写法
<img src="https://img-blog.csdnimg.cn/2022010706012410164.gif">

上面分别是图片的 base64 编码在 css 里面的写法和在 html img 标签里的写法。base64 编码长得就是这个样子，随着html一起被发送给浏览器了。

2. 优点和缺点

上述可看出这样可以节省一个 http 请求，算是前端优化的一部分
在这里要明确使用 base64 的一个前提，那就是被 base64 编码的图片足够尺寸小。

以一张图片为例子

该图片大小为51kb

转为base64变成68295个字符，比原来大了。也就是说，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些。即便 base64 编码能够被 gzip 压缩，压缩率能达到 50% 以上，想象一下，一个元素的 css 样式编写居然超过了 60000个字符，那对 css 整体的可读性将会造成十分大的影响，代码的冗余使得在此使用 base64 编码将得不偿失

所以如果如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。

比如有一个是我们经常会遇到的，就是页面的背景图 background-image 。在很多地方，我们会制作一个很小的图片大概是几px*几px，然后平铺它页面当背景图。因为是背景图的缘故，所以无法将它放入雪碧图，而它却存在网站的很多页面，这种图片往往只有几十字节，却需要一个 http 请求，十分不值得。那么此时将它转化为 base64 编码

雪碧图介绍：css雪碧图及优缺点
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

还有一种是iconfont，将图标转为svg。缺点是颜色是单一在css中设置的（像字体一样），ui给的炫酷图标无法用。而且如果想换个图标，还得跑阿里库上更新图重新生成压缩包。
iconfont使用在这里vue中阿里图标库iconfont的设置

3. 其他

Base64 的好处能够减少一个图片的 HTTP 请求，然而，付出的代价则是 CSS 文件体积的增大，CSS 文件体积的增大意味着 CRP。通俗而言，就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。

所以，要有取舍地使用base64。正常比较大的图片，都不可用base64，因为塞进css里增大css文件阻塞渲染。base64适用于极小极简单的图片。