1、前言

在我之前的博客中，介紹有關(guān)ASCII的相關(guān)知識

• 計(jì)算機(jī)相關(guān)知識——字符編碼中ASCII、Unicode和UTF-8的相關(guān)知識

中間有時(shí)會提到如何轉(zhuǎn)換

• JS學(xué)習(xí)筆記——window對象的函數(shù)btoa和atob

但是對于Base64的概念，但沒有細(xì)說，所以這期來簡單聊聊Base64編碼。

2、為什么使用Base64

我們知道，Ascii碼的128～255之間的值是不可見字符。在網(wǎng)絡(luò)上交換數(shù)據(jù)時(shí)，比如從A地傳到B地，往往要經(jīng)過多個(gè)路由設(shè)備，由于不同的設(shè)備對字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯(cuò)誤，這是不利于傳輸?shù)摹Ｋ跃拖劝褦?shù)據(jù)轉(zhuǎn)為Base64編碼，統(tǒng)統(tǒng)變成可見字符，這樣出錯(cuò)的可能性就大降低了。

同時(shí)base64作為網(wǎng)絡(luò)上最常見的用于傳輸8bit字節(jié)代碼的編碼方式之一。有時(shí)我們需要把二進(jìn)制數(shù)據(jù)編碼為適合放在URL中的形式。這時(shí)采用base64編碼具有不可讀性，即所編碼的數(shù)據(jù)不會被人直接看出。除此之外，還可以放在請求頭，響應(yīng)頭進(jìn)行傳輸。

3、Base64的概念

Base64 就是指64個(gè)字符，包括大小寫字母[A-Z、a-z]，阿拉伯?dāng)?shù)字[0-9]，還有兩個(gè)字符[+、/]，還有一個(gè)表示后綴的字符 [ = ]，Base64就是指只能傳輸這64個(gè)字符 。

【注意】實(shí)際上Base64是65個(gè)字符

4、Base64的原理

4.1、編碼規(guī)則

ASCII碼， ASCII碼的范圍是0-127，其中0-31和127是控制字符，共33個(gè)。其余95個(gè)，即32-126是可打印字符，包括數(shù)字、大小寫字母、常用符號等。Base64 就是將 ASCII碼 用 Base64位字符表示。

編碼規(guī)則：

• 第一步：將每3個(gè)字符作為一組，一共是24個(gè)二進(jìn)制位
• 第二步：將這24個(gè)二進(jìn)制位分為4組，每個(gè)組有6個(gè)二進(jìn)制位
• 第三步：在每組前面加兩個(gè)00，擴(kuò)展成32個(gè)二進(jìn)制位，即4個(gè)字符
• 第四步：根據(jù)下表，得到擴(kuò)展后的每個(gè)字節(jié)的對應(yīng)符號，這就是Base64的編碼值
  

4.2、編碼示例

（1）Base64編碼實(shí)例一：

將字符串“dog"轉(zhuǎn)為Base64編碼：

• 第一步：d: ASCII值 100 ，二進(jìn)制為 0110 0100；o: ASCII值 111 ，二進(jìn)制為 0110 1111；g: ASCII值 103，二進(jìn)制為 0110 0111（ASCII碼可以上網(wǎng)搜那張對應(yīng)表）
• 第二步：將這24個(gè)二進(jìn)制位 ：0110 0100 0110 1111 0110 0111 ，分為4組：011001 000110 111101 100111
• 第三步：每組前面加兩個(gè)00，即：00011001 00000110 00111101 00100111
• 第四步：查找對應(yīng)的碼值分別為：25、6、61、39。查找上表，可以知道得到編碼后的字符串為：ZG9n，所以字符串“dog”對應(yīng)的Base64碼值為“ZG9n”

（2）Base64編碼實(shí)例二：

將字符串“Man"轉(zhuǎn)為Base64編碼，（這次我們以圖來演示如何轉(zhuǎn)換）：
從上述兩個(gè)例子可以得出結(jié)論：

• 6和8的最小公倍數(shù)是24，所以Base64 需要6個(gè)二進(jìn)制位表示 ASCII 碼 8個(gè)二進(jìn)制位，顯然，我們需要補(bǔ)0
• 這樣 4個(gè)Base64編碼的6bit字符剛好能夠表示3個(gè)傳統(tǒng)的Ascii編碼的8bit字符
• base64編碼傳輸會使得信息變大， 數(shù)據(jù)體積通常是原數(shù)據(jù)的體積4/3

4.3、特殊情況

上面我們的例子都是3個(gè)字符的情況，那如果不滿3個(gè)，該怎么做？

（1）2個(gè)字節(jié)的情況：將這2個(gè)字節(jié)的一共16個(gè)二進(jìn)制位，按照上面的規(guī)則，轉(zhuǎn)成三組(6,6,4)，最后一組除了前面加兩個(gè)0以外，后面也要加兩個(gè)0。這樣得到一個(gè)三位的Base64編碼，再在末尾補(bǔ)上一個(gè)"="號。
比如：“Ma"這個(gè)字符串是兩個(gè)字節(jié)，可以轉(zhuǎn)化成三組00010011、00010110、00000100以后，對應(yīng)Base64值分別為T、W、E，再補(bǔ)上一個(gè)”="號，因此"Ma"的Base64編碼就是TWE=。

（2）1個(gè)字節(jié)的情況：將這1個(gè)字節(jié)的8個(gè)二進(jìn)制位，按照上面的規(guī)則轉(zhuǎn)成2組(6,2)，最后一組除了前面加二個(gè)0以外，后面再加4個(gè)0。這樣得到一個(gè)二位的Base64編碼，再在末尾補(bǔ)上兩個(gè)"="號。
比如：“M"這個(gè)字母是一個(gè)字節(jié)，可以轉(zhuǎn)化為二組00010011、00010000，對應(yīng)的Base64值分別為T、Q，再補(bǔ)上二個(gè)”="號，因此"M"的Base64編碼就是TQ==。

如果上述文字理解起來比較麻煩，可以參考下圖：

4.4、加碼過程

Base64解碼的過程比較簡單。去掉末尾的等號=。剩下的Base64字符，每8bit組成一個(gè)8bit字節(jié)，最后剩余不足8位的丟棄即可

5、Base64的作用

• Base64編碼是從二進(jìn)制 ------> 字符的過程
• 采用Base64編碼具有不可讀性，需要解碼后才能閱讀。但是Base64不是加密，只是一種可被翻譯的編碼
• Base64編碼可用于在HTTP環(huán)境下傳遞較長的標(biāo)識信息，用作HTTP表單和HTTP GET URL中的參數(shù)
• 當(dāng)需要把二進(jìn)制數(shù)據(jù)放到url中時(shí)，采用base64具有不可讀性比較合適

6、Base64的使用場景

6.1、圖片的Base64編碼

我們有時(shí)會看到，一些圖片的地址并不是一個(gè)網(wǎng)絡(luò)地址，而是一串字符串（如下圖紅框所示），這就是用Base64來表示該圖片的地址。

圖片的 base64 編碼就是將一張圖片數(shù)據(jù)編碼成一串字符串，使用該字符串表示圖片，從而無需圖片地址。

這樣做有什么意義呢？我們知道，我們所看到的網(wǎng)頁上的每一個(gè)圖片，都是需要消耗一個(gè) http 請求下載而來的。要是圖片的下載不用向服務(wù)器發(fā)出請求，而可以隨著 HTML 的下載同時(shí)下載到本地那就太好了，而 base64 正好就可以滿足。這里等于把圖片變?yōu)橐淮幋a，直接嵌在html里傳遞給了瀏覽器，瀏覽器不用再次請求圖片了。

編碼之后的字符串可以直接內(nèi)聯(lián)到HTML中顯示，比如，我們一些體積比較小的圖片，（注意：是圖片足夠小的情況下），就可以轉(zhuǎn)換成 Base64編碼，直接插入到圖片的 src 路徑中。

在css里面的寫法：

#xxx_xxx {background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center; }

在html里面img標(biāo)簽中的寫法：

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

（小秘密😏）

諸如我們都熟悉的迅雷的“專用地址”，也是用 Base64 加密的：

thunder://QUFodHRwOi8vZG93bi5zYW5kY······1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa（不要復(fù)制我我真的不是種子）

6.2、部分背景圖

我們經(jīng)常會遇到一個(gè)場景，就是頁面的背景圖 background-image 。在很多地方，我們會制作一個(gè)很小的圖片大概是幾px * 幾px，然后平鋪它頁面當(dāng)背景圖。

因?yàn)槭潜尘皥D的緣故，所以無法將它放入雪碧圖，而它卻在網(wǎng)站的很多頁面使用，這種圖片往往只有幾十字節(jié)，卻需要一個(gè) http 請求，十分不值得。那么此時(shí)將它轉(zhuǎn)化為 base64 編碼，何樂而不為？

下面（）是一個(gè)只有 50 字節(jié)的2*2的的背景圖。將其轉(zhuǎn)化成 base64 編碼，只有 100 多個(gè)字符，相比一個(gè) http 請求，這種轉(zhuǎn)換無疑更值得推崇:

7、Base64的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

• Base64 的好處能夠減少一個(gè)圖片的 HTTP 請求

缺點(diǎn)：

• 圖片被Base64編碼 之后，生成的字符串編碼大小一般都會比原文件稍大一些。即便Base64 編碼能夠被 gzip 壓縮，壓縮率能達(dá)到 50% 以上，也會比原文件大。
• 圖片不會導(dǎo)致關(guān)鍵渲染路徑的阻塞，但是用Base64編碼轉(zhuǎn)換后的使用會增加 CSS 文件的體積，而CSS 文件體積的增大意味著會阻礙 CRP（CRP指關(guān)鍵渲染路徑，具體可以查看博客 《前端性能優(yōu)化 CRP》），影響頁面渲染，增加用戶使用白屏?xí)r長（HTML 和 CSS 會阻塞渲染，而圖片不會）

CRP（Critical Rendering Path，關(guān)鍵渲染路徑）：當(dāng)瀏覽器從服務(wù)器接收到一個(gè)HTML頁面的請求時(shí)，到屏幕上渲染出來要經(jīng)過很多個(gè)步驟。瀏覽器完成這一系列的運(yùn)行，或者說渲染出來我們常常稱之為“關(guān)鍵渲染路徑”。

所以，要有取舍地使用base64。正常比較大的圖片，都不可用Base64，因?yàn)槿M(jìn)css里增大css文件阻塞渲染；對于一些極小的，簡單的圖片，我們可以使用Base64編碼。

---

參考博客：

• 【前端攻略】：玩轉(zhuǎn)圖片Base64編碼
• 前端性能優(yōu)化 CRP
• js實(shí)現(xiàn)基于Base64的編碼及解碼

總結(jié)

以上是生活随笔為你收集整理的计算机相关知识——前端Base64编码解码的基础使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。