初探Base64

“ 去认识更多的人，去看更大的世界”

hello,宝宝们，感觉好久没见！昨天去了十渡，风景真的很好，有山有水，大饱眼福，尽管很累。各位宝宝也要常出去走走哦，不要总憋在家里~

今天我要说的是关于base64

什么是Base64

—

Base64是基于64个可打印字符来表示二进制的方法。这64个可打印的字符是：A-Z，a-z，0-9，以上共62，还有两个字符，在不同系统中不同。

在MIME格式中，Base64用于将binary的字节序列编码成ASCII字符序列构成的文本，在传输编码中指定Base64格式。使用的字符是A-Z，a-z，0-9，还有'/' 和 '+'以及' = '作为后缀用途。

每个Base64格式的字符代表6 bits的数据，也就是说3个8 bits的字符串/二进制文件能被4个6 bits的Base64的数字表示。

这就意味着转换成Base64格式的文件会增大大约33%。当数据很小的时候，这个增长可能更大，例如：长度为1的"a"，转换成Base64后变成长度为4的"YQ=="，这样的话"a"的长度增加了300%

Base64怎么用于前端

—

以上我们知道，如果我们把文件转换成Base64格式的，文件会明显的增大，那么是不是Base64对于我们来说就没有任何卵用呢？

并不是啦！在图片处理上，有时候，我们把图片的引用从请求后端数据改成直接引用Base64数据，这样可以减少一个请求，对网站进行优化。说到减少请求就不得不是CSSspirite，那么针对这两个方案的选择该怎样呢？

原则建议如下：

1，有特殊用途，无法和其他图片合在一起做成雪碧图的

2，使用与小图片，因为打的图片换成Base64对于CSS体积增大明显

3，更新需求不高（如果图片三天两头的更新，那要把前端累死了）

关于Base64的转码

—

js原生支持Base64的转码：

// 将binary数据字符串格式内容转换成Base64的ASCII码
window.btoa()
//将Base64的ASCII码格式内容转换成binary数据字符串
window.atob()

由于DOMString 是16位编码的字符串，所以如果有字符超出了8位ASCII编码的字符范围时，在大多数的浏览器中对Unicode字符串调用 window.btoa 将会造成一个 Character Out Of Range 的异常。所以此时要进行转码：

var str = '凛就是我鸭，哈哈哈'
var ASCIIStr = window.btoa(window.encodeURIComponent(str))
//JUU1JTg3JTlCJUU1JUIwJUIxJUU2JTk4JUFGJUU2JTg4JTkxJUU5JUI4JUFEJUVGJUJDJThDJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4
var decodeStr = window.decodeURIComponent(window.atob(ASCIIStr))
// 凛就是我鸭，哈哈哈

so，关于Base64有了初步的了解，各位宝宝们试着在项目中用用吧！

干货满满的参考文档：https://www.cnblogs.com/coco1s/p/4375774.html

愿我们有能力不向生活缴械投降---Lin