初探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

原文发布于微信公众号 - 女程序员的日常(gh_df41d619fb70)

原文发表时间:2019-06-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券