1、前言

在我之前的博客中，介紹有關ASCII的相關知識

• 計算機相關知識——字符編碼中ASCII、Unicode和UTF-8的相關知識

中間有時會提到如何轉換

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

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

2、為什么使用Base64

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

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

3、Base64的概念

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

【注意】實際上Base64是65個字符

4、Base64的原理

4.1、編碼規(guī)則

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

編碼規(guī)則：

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

4.2、編碼示例

（1）Base64編碼實例一：

將字符串“dog"轉為Base64編碼：

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

（2）Base64編碼實例二：

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

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

4.3、特殊情況

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

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

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

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

4.4、加碼過程

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

5、Base64的作用

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

6、Base64的使用場景

6.1、圖片的Base64編碼

我們有時會看到，一些圖片的地址并不是一個網絡地址，而是一串字符串（如下圖紅框所示），這就是用Base64來表示該圖片的地址。

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

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

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

在css里面的寫法：

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

在html里面img標簽中的寫法：

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

（小秘密😏）

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

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

6.2、部分背景圖

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

因為是背景圖的緣故，所以無法將它放入雪碧圖，而它卻在網站的很多頁面使用，這種圖片往往只有幾十字節(jié)，卻需要一個 http 請求，十分不值得。那么此時將它轉化為 base64 編碼，何樂而不為？

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

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

優(yōu)點：

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

缺點：

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

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

所以，要有取舍地使用base64。正常比較大的圖片，都不可用Base64，因為塞進css里增大css文件阻塞渲染；對于一些極小的，簡單的圖片，我們可以使用Base64編碼。

---

參考博客：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。