“ 去认识更多的人,去看更大的世界”
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