首先，我們要樹立兩個(gè)基本認(rèn)知。
二進(jìn)制圖片不能直接以字符串形式存在 .js 文件中，因?yàn)橹苯佑?ASCII （美國信息交換標(biāo)準(zhǔn)代碼）表示的二進(jìn)制字符串太大了。一個(gè)二進(jìn)制 “00000000”，占 8 比特大小，也就是 1 個(gè)字節(jié)的大小。一個(gè)直接用 ASCII 表示的字符串 “00000000”，占 8*8 比特大小，也就是 8 個(gè)字節(jié)的大小，是二進(jìn)制大小的 8 倍。
二進(jìn)制圖片不能直接以 ASCII 的格式轉(zhuǎn)換為字符串，這是因?yàn)?ASCII 字符集不僅存在可見字符，還存在不可見字符。例如，二進(jìn)制 “00000000” 對(duì)應(yīng)的 ASCII 字符是“空字符（Null）”，空字符是不可見字符。
但是，二進(jìn)制圖片可以借助 Base64 進(jìn)行轉(zhuǎn)換。Base64 從 ASCII 256 個(gè)字符中選取了 64 個(gè)可見字符作為基礎(chǔ)，這樣就二進(jìn)制就能以 Base64 的格式轉(zhuǎn)換為 ASCII 字符串了。例如，二進(jìn)制 00000000 對(duì)應(yīng)的 Base64 字符是 A，是可見字符，可見字符 A 是可以存在在 .js 文件中的。
需要注意的是，ASCII 256 個(gè)字符需要 8 個(gè)比特來表示（2^8=256），Base64 的 64 個(gè)字符只需要 6 個(gè)比特位來表示（2^6=64）。但實(shí)際上，Base64 字符也是以 ASCII 碼的形式存在，因此這里就有 2 個(gè)比特的浪費(fèi)（8-6=2）。
你可以再仔細(xì)觀察一下前面我提供的 Base64 轉(zhuǎn)換的原理示意圖，相信你一下就能明白其中原理。Base64 以 3 個(gè)字節(jié)作為一組，一共是 24 比特。將這 24 個(gè)比特分成 4 個(gè)單元，每個(gè)單元 6 個(gè)比特。每個(gè)單元前面加 2 個(gè) 0 作為補(bǔ)位，一共 8 個(gè)比特，湊整 1 個(gè)字符。轉(zhuǎn)換后原來的 24 比特，就變成了 32 比特，因此轉(zhuǎn)換后的體積就大了 1/3（ 1/3 = 1 - 24/32）。
