当初网站为了晋升用户的浏览体验越来越多的应用了图片，而这些图片通常以 Base64 的模式存储和加载。因而各位开发工程师必定对 Base64 毫不生疏了，那么你晓得 Base64 到底是什么，为什么要应用 Base64，以及 Base64 的优缺点吗？
什么是 Base64
Base64 是网络中存储和传输的二进制数据的广泛用法。Base64 一个字节只能示意 64 种状况，且编码格局每个字节的前两位都只能是 0，应用剩下的 6 位示意内容。
看到这里置信大家也可能意识到，这种编码格局无奈充分利用存储资源，效力较低。那为什么还会成为网络中的广泛用法呢？
其实 Base64 最早是利用在邮件传输协定中的。过后邮件传输协定只反对 ASCII 字符传递，应用 ASCII 码来示意所有的英文字符和数字还有一些符号。这里有一个问题，如果邮件中只传输英文数字等，那么 ASCII 能够间接反对。然而如果要在文件中传输图片、视频等资源的话，这些资源转成 ASCII 的时候会呈现非英文数字的状况。而且邮件中还存在很多控制字符，这些控制字符又会成为不可见字符。非英文字符和控制字符在传输过程中很容易产生谬误，影响邮件的正确传输。为此才有了诞生了一个新的编码规定，把二进制以 3 个字节为一组，再把每组的 3 个字节（24 位）转换成 4 个 6 位，每 6 位依据查表对应一个 ASCII 符号，这就是 Base64。
Base64 将 8 位为一个单元的字节数据，拆分为 6 位为一个单元的二进制片段。每一个 6 位单元对应 Base64 索引表中的一个字符。简略举个例子，下图中 M 的 ASCII 码是 77 , 而转换为二进制后前六位二进制对应值为 19，为 Base64 字典中的 T。
当然这里也会有一个问题，如果要编码的二进制数据不是 3 的倍数，那就会剩下一至二个字节。为此 Base64 应用 000000 字节值在开端补足，使其字节数可能被 3 整除，补位用 = 示意，= 的个数可示意补了多少字节，并在解码时主动去除。总体来看相比编码前，Base64 编码后的字符减少了约 33%。
图片的 Base64 编码
后面咱们也提到了 Base64 编码是当初网站小图片的次要加载形式，那 Base64 到底是如何解决图片的呢？
咱们都晓得图片在网页中的应用办法通常是应用 img 标签的模式，而 img 标签的 src 属性会指定一个近程服务器上的资源。在网页加载到浏览器中时，浏览器会针对每个内部资源都向服务器发送一次拉取资源申请。然而这是十分占用网络资源的，而且因为大多数浏览器都有并发申请数的限度，如果你的网页中嵌入了过多内部申请，就很容易呈现页面加载速度过慢的状况。
而 Base64 编码能够通过 Data URL 技术让图片以字符串的格局间接嵌入页面，与 HTML 成为一体。这样在加载时就能够避开对外部资源的申请
为什么抉择 Data URL
至于为什么抉择 Data URL 技术，是因为跟传统的内部资源援用形式相比，它领有以下长处：
- 缩小 HTTP 申请；
- 防止跨域问题；
- 可像独自图片一样应用，比方背景图片重复使用等。
通过这种形式 Base64 编码能够更为快捷不便得对前端的各种图片资源进行优化。咱们看一个具体的例子：
能够显著看到 Base64 编码将一幅图片数据编码成一串字符串，并应用该字符串代替图像地址。只管乍一眼看上去没有任何图片相干的内容，但它最终渲染出的毫无疑问是一张残缺的图片成果。
当然应用 Data URL 来进行 Base64 图片编码并不是完满的，它有着两个不容忽视的毛病：
- Base64 编码的数据体积通常是原数据的体积 4/3，也就是 Data URL 模式的图片会比二进制格局的图片体积大 1/3
- Data URL 模式的图片不会被浏览器缓存
无奈被浏览器缓存也就意味着每次拜访都须要从新申请资源，这对于服务器压力是比拟大的。那有没有方法，能将这些数据也放入浏览器缓存中呢？
放慢加载小技巧
其实大部分网站的背景图形成，是一个宽高只有几个像素的小图片，通过将它平铺成为背景图。通常咱们将小图片保留成 GIF 或 PNG 格局，而后在 CSS 的 background-image 属性中援用图片地址。然而浏览器自身并不在意 URL 里写的是什么，只是须要通过它获取须要的数据。
所以咱们齐全能够应用 CSS 款式文件，让 Data URL 模式的图片存储在 CSS 样式表中。这样浏览器就会缓存 CSS 文件，也就会缓存图片，可能进一步提高页面加载效率。
上图就是一个简略的应用案例，通过这种形式既防止了让背景图片单独产生一次 HTTP 申请的状况，还让背景图片和 CSS 文件一起被浏览器缓存起来，防止了每次关上网页都加载一次背景图片的状况，让改善用户的浏览体验更为疾速晦涩。
通过 Date URL 技术与 Base64 编码的联合无效缩小 HTTP 申请，让用户拜访体验更好，这其实是咱们一个开发过程中的小技巧，心愿看完后可能带给大家一些帮忙。
举荐浏览
游戏出海浪潮下，这些技术难点该如何攻克
跨境电商 2 大技术难题，到底该如何解决？