查看原文
其他

一文搞定 Base64 编码原理足矣

前端大全 2023-02-26

推荐关注↓

转自:Morakes

链接:https://juejin.cn/post/7168809452508807182

本文将带你探索Base64编码的原理

把图片丢进浏览器,打开sources能看到一长串字符串,这是图片的Base64编码。这一长串编码到底是怎么生成的呢?我们接下来探索一下base64编码的原理

Base64 名称的由来

Base64编码要求把3个8位的字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='。

为了保证所输出的编码位可读字符,Base64制定了一个编码表,以便进行统一转换。编码表的大小为2^6=64,这也是Base64名称的由来。(下面是Base64编码表)


思路

原始数据对应ASCII,生成8位的二进制,3个8位的字节(3*8=24)转化为4个6位的字节(4*6=24),不够补零。分割之后,得出来6位字节的二进制转化成十进制,再从base64表中寻找对应的字符

graph TD
原始数据 --> 每个字符按照ASCII编码生成3个8位的二进制 --> 3个8位的字节分割为4个6位字节 --> 再转化成十进制生成Base64编码

实现过程

(补一张ASCII编码表)

原始数据:Mz1

根据ASCII表转换成8位二进制:01001101 | 01111010 | 00110001

将 3*8 切割成 4*6:010011 | 010111 | 101000 | 110001

分别转化成十进制:19 | 23 | 40 | 49

最后再去Base64编码表中找到数字对应的字符:T | X | o | x

最终 Mz1 的 Base64 :TXox

强化训练

Q:写出TB对应的Base64编码

1.TB 对应的ASCII

T:01010100 B:01000010

2.将三个8位的二进制分割成4个6位的二进制


3.将二进制转换成十进制


4.将十进制按照Base64表得到Base64编码


A:TB所对应的Base64编码为 VEI=

用Base64的来呈现图片的有什么优势呢?

  1. 减少http网络请求:网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。
  2. 不会造成跨域请求的问题。
  3. 没有图片更新要重新上传,不会造成清理图片缓存的问题

不足之处就在于增加了CSS文件的尺寸造成数据库数据量的增大IE6 IE7并不支持

对你有帮助的话,就点个赞吧!

- EOF -


加主页君微信,不仅前端技能+1

主页君日常还会在个人微信分享前端开发学习资源技术文章精选,不定期分享一些有意思的活动岗位内推以及如何用技术做业余项目

加个微信,打开一扇窗



推荐阅读  点击标题可跳转

1、base64 格式的数据是如何实现的

2、精进 JavaScript | 这些手写你都会吗 ?

3、数据大屏最简单自适应方案,无需适配 rem 单位


觉得本文对你有帮助?请分享给更多人

推荐关注「前端大全」,提升前端技能

点赞和在看就是最大的支持❤️

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存