前言

上一次，我写了一篇《Data URL的简介与使用》(http://verymuch.site/2017/12/14/Data URL简介与使用/)，该文章主要先容了什么是Data URL，其优缺点以及若何使用。其中有一个隐含在文中的主要观点，那就是Data URL是Base64编码的，且Base64编码的数据体积通常是原数据的体积4/3。

不知道人人会不会有这样的疑问：

1. 为什么图片转成Base64编码，就可以直接内联到HTML中显示呢？

2. 为什么Base64编码后，体积会增大1/3呢？

若是你对此也有疑问的话，就往下一看事实吧。

为什么Base64编码可以内联到HTML中？

我们知道HTTP协议是文本协议，不同于通例的二进制协议那样直接举行二进制传输。Base64编码是 从二进制到字符的历程，可用于在HTTP环境下通报较长的标识信息。

什么是Base64编码

首先Base64是一种编码算法，为什么叫做Base64呢？实在缘故原由也很简朴，是因为该算法共包罗64个字符。包罗大小写拉丁字母各26个、数字10个、加号 + 和斜杠 / ，共64个字符。此外另有等号 = 用来作为后缀用途。

字符与索引的对应关系如下图所示。

但，为什么Base64编码算法只支持64个字符呢？

首先，我们先回首下ASCII码。ASCII码的局限是0-127，其中0-31和127是控制字符，共33个。其余95个，即32-126是可打印字符，包罗数字、大小写字母、常用符号等。如下图所示，图片泉源（https://zh. *** .org/wiki/ASCII）。

早期的一些传输协议，例如邮件传输协议 *** TP，只能传输可打印的ASCII字符。这样原本的8bit字节码（0-255）就会超出使用局限，从而导致无法传输。

这时，就产生了Base64编码，它行使 6bit字符来表达原本的8bit字符 。

Base64编码原理

上面我们知道了什么是Base64编码，知道了其包罗的64个字符。它主要是通过6bit字符来表达原本的8bit字符。接下来我们一起学习下这一历程是若何举行的。

首先，6bit显然不够容纳8bit的数据。6和8的最小公倍数是24，以是我们用4个Base64字符恰好能够示意三个传统的8bit字符。如下所示，字符串 Man 的编码图解如下：

Man 的编码效果为 TWFu ，显然，Base64编码会多1/3的长度，这也注释了文中开头的疑问，为什么Base64编码后的体积会大1/3。

Man 这个字符串的长度恰好是3，我们能用4个Base64来示意。若是待编码的字符串长度不是三的倍数时应该怎么处置呢？

这是需要做一个特殊处置，假设待编码字符串长度为10。这前9个字符可以用12个Base64字符示意。第10个字符的前6bit作为一个Base64字符， 剩下的2bit后面需要先补0，补到6位（此处补4个0） 作为第二个Base64字符，至于第三个和第四个Base64字符，虽然没有相对应的内容，我们仍需 以 = 填充 。

如下图所示， A 对应的Base64编码为  *** == ， BC 对应的Base64编码为 QkM= 。

最后的问题就是解码啦，解码的历程比较简朴。 去掉末尾的等号 = 。剩下的Base64字符，每8bit组成一个8bit字节，最后剩余不足8位的抛弃即可。

总结

本文篇幅较短，旨在简朴先容Base64编码原理。信赖看完之后，人人一定能够明白为什么Base64编码后体积会增大1/3，而不再是死记硬背这一特点。至少有这个收获就够啦。

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「 奇舞团 」运营的前端手艺社区。关注民众号后，直接发送链接到后台即可给我们投稿。

编者按：本文作者岑岭，360奇舞团前端工程师，W3C性能事情组/WOT事情组成员。 

原文  http://mp.weixin.qq.com/s