前端理解base64
一、背景：ascii碼
字符=>二進制
計算機中所有數據的存儲都是以二進制模式，比如想要存儲abcd需將其轉化為二進制，具體用哪些二進制來表示哪個符號*，有一個統一的編碼規則，這就是ascii。
ASCII 碼使用指定的7 位或8 位二進制數組合來表示128 或256 種可能的字符。（2的八次方=256，8個bit可以用來表示0-255）
0-127可以表示大小寫的26個字母、加減乘除符號、阿拉伯數據還有控制字符比如換行符等。
觀察百度百科上的ascii碼表（128個字符）可以發現第八位都是0，等于沒用第八位。因為英語中128個字符即可表示所有。
ascii大小規則
0-9<A~Z<a-z。
但如果是其他語言，比如法語128個不夠。于是歐洲國家決定啟用閑置的第八位，這樣就有256個了。不過不同的國家有不同的字母，后128位同一編碼在不同語言中代表不同的字符。注意前128位是一樣的。
至于亞洲國家比如漢字就太多了，一個字節不夠，必須采用多個字節代表一個符號。比如，簡體中文常見的編碼方式是GB2312，使用兩個字節表示一個漢字，所以理論上最多可以表示 256 x 256 = 65536 個符號。
二、base64基本介紹
二進制=>字符
1.作用
- base64編碼是從二進制=>字符的過程。
- 采用Base64編碼具有不可讀性，需要解碼后才能閱讀。但是base64不是加密，只是一種可被翻譯的編碼。
- Base64編碼可用于在HTTP環境下傳遞較長的標識信息，用作HTTP表單和HTTP GET URL中的參數。
- 當需要把二進制數據放到url中時，采用base64具有不可讀性比較合適
2. 使用原因
ascii碼的128～255之間的值是不可見字符。而在網絡上交換數據時，比如說從A地傳到B地，往往要經過多個路由設備，由于不同的設備對字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯誤，這是不利于傳輸的。所以就先把數據先做一個Base64編碼，統統變成可見字符，這樣出錯的可能性就大降低了
3. 如何生成
01000100010011101100111010111100011001010…那么我們取6個比特為一組，計算它的ascii值，得到一個字符，這個字符肯定是可見字符，好，把它對應的字符寫出來，再取6個比特，計算…，如此下去，直到最后，就完成了編碼。
4. 其他
-
標準base64只有64個字符（英文大小寫、數字和+、/）以及用作后綴等號。如下為base64對照表。注意和ascii表是不一樣的！
-
6bit為一組，那么4個base64字符即表示了24bit，即3個字節（24/8=3）。可理解為，原先用二進制只需要3個字節表示的信息，用base64卻要占4個字符（即四個字節）。
有點繞，舉例吧
- 轉換前 10101101,10111010,01110110 （二進制）
- 轉換后（每六個為一組轉為ascii碼，ascii碼就是8位的二進制）00101011, 00011011 ,00101001 ,00110110 （二進制）
- 十進制：43 27 41 54
- 對照base64表轉為可見字符： r b p 2
計算機存儲信息都是按ascii碼來的，所以這四個字符在ascii碼中是四個字節。原先3個字節的信息現在占位4個字節了，所以base64傳輸會使得信息變大， 為原來的4/3
- 剛才說了base64可以用在url里，但是標準的Base64并不適合直接放在URL里傳輸，因為URL編碼器會把標準Base64中的“/”和“+”字符變為形如“%XX”的形式。為解決此問題，可采用一種用于URL的改進Base64編碼，它不僅在末尾去掉填充的’='號，并將標準Base64中的“+”和“/”分別改成了“-”和“_”。
三、圖片Base64編碼
1 圖片的base64編碼是什么
圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串表示圖片，從而無需圖片地址。
這樣做有什么意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的。
比如下圖的圖標
瀏覽器解析html到灰色標注的img那里，就會向src所在地址發一個請求，請求這個圖片，下圖即為發出的請求。
不管如何，圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，而可以隨著 HTML 的下載同時下載到本地那就太好了，而 base64 就可以。這里等于把圖片變為一串編碼，直接嵌在html里傳遞給了瀏覽器，瀏覽器不用再次請求圖片了。
舉個栗子。www.google.com 的首頁搜索框右側的搜索小圖標使用的就是base64編碼。我們可以看到：
上面分別是圖片的 base64 編碼在 css 里面的寫法和在 html img 標簽里的寫法。base64 編碼長得就是這個樣子，隨著html一起被發送給瀏覽器了。
2. 優點和缺點
- 上述可看出這樣可以節省一個 http 請求，算是前端優化的一部分
- 在這里要明確使用 base64 的一個前提，那就是被 base64 編碼的圖片足夠尺寸小。
以一張圖片為例子
該圖片大小為51kb
轉為base64變成68295個字符，比原來大了。也就是說，圖片被編碼之后，生成的字符串編碼大小一般而言都會比原文件稍大一些。即便 base64 編碼能夠被 gzip 壓縮，壓縮率能達到 50% 以上，想象一下，一個元素的 css 樣式編寫居然超過了 60000個 字符，那對 css 整體的可讀性將會造成十分大的影響，代碼的冗余使得在此使用 base64 編碼將得不償失
- 所以如果如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖（CssSprites），在整個網站的復用性很高且基本不會被更新。
比如有一個是我們經常會遇到的，就是頁面的背景圖 background-image 。在很多地方，我們會制作一個很小的圖片大概是幾px*幾px，然后平鋪它頁面當背景圖。因為是背景圖的緣故，所以無法將它放入雪碧圖，而它卻存在網站的很多頁面，這種圖片往往只有幾十字節，卻需要一個 http 請求，十分不值得。那么此時將它轉化為 base64 編碼
雪碧圖介紹：css雪碧圖及優缺點
CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
還有一種是iconfont，將圖標轉為svg。缺點是顏色是單一在css中設置的（像字體一樣），ui給的炫酷圖標無法用。而且如果想換個圖標，還得跑阿里庫上更新圖重新生成壓縮包。
iconfont使用在這里vue中阿里圖標庫iconfont的設置
3. 其他
- Base64 的好處能夠減少一個圖片的 HTTP 請求，然而，付出的代價則是 CSS 文件體積的增大，CSS 文件體積的增大意味著 CRP。通俗而言，就是圖片不會導致關鍵渲染路徑的阻塞，而轉化為 Base64 的圖片大大增加了 CSS 文件的體積，CSS 文件的體積直接影響渲染，導致用戶會長時間注視空白屏幕。HTML 和 CSS 會阻塞渲染，而圖片不會。
所以，要有取舍地使用base64。正常比較大的圖片，都不可用base64，因為塞進css里增大css文件阻塞渲染。base64適用于極小極簡單的圖片。
總結
以上是生活随笔為你收集整理的前端理解base64的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【云原生】Kubernetes（k8s）
- 下一篇： 前端速成：双月Java之旅（week3）