Base64 編碼知識(shí)，一文打盡！Base64圖片能不能被緩存？

以下文章來(lái)源于又拍云 ，作者李國(guó)鑫

現(xiàn)在網(wǎng)站為了提升用戶的瀏覽體驗(yàn)越來(lái)越多的使用了圖片，而這些圖片通常以 Base64 的形式存儲(chǔ)和加載。因此各位開發(fā)工程師肯定對(duì) Base64 毫不陌生了，那么你知道 Base64 究竟是什么，為什么要使用 Base64，以及 Base64 的優(yōu)缺點(diǎn)嗎？



什么是 Base64

Base64 是網(wǎng)絡(luò)中存儲(chǔ)和傳輸?shù)亩M(jìn)制數(shù)據(jù)的普遍用法。Base64 一個(gè)字節(jié)只能表示 64 種情況，且編碼格式每個(gè)字節(jié)的前兩位都只能是 0，使用剩下的 6 位表示內(nèi)容。
看到這里相信大家也能夠意識(shí)到，這種編碼格式無(wú)法充分利用存儲(chǔ)資源，效能較低。那為什么還會(huì)成為網(wǎng)絡(luò)中的普遍用法呢？
其實(shí) Base64 最早是應(yīng)用在郵件傳輸協(xié)議中的。當(dāng)時(shí)郵件傳輸協(xié)議只支持 ASCII 字符傳遞，使用 ASCII 碼來(lái)表示所有的英文字符和數(shù)字還有一些符號(hào)。這里有一個(gè)問(wèn)題，如果郵件中只傳輸英文數(shù)字等，那么 ASCII 可以直接支持。但是如果要在文件中傳輸圖片、視頻等資源的話，這些資源轉(zhuǎn)成 ASCII 的時(shí)候會(huì)出現(xiàn)非英文數(shù)字的情況。而且郵件中還存在很多控制字符，這些控制字符又會(huì)成為不可見字符。非英文字符和控制字符在傳輸過(guò)程中很容易產(chǎn)生錯(cuò)誤，影響郵件的正確傳輸。為此才有了誕生了一個(gè)新的編碼規(guī)則，把二進(jìn)制以 3 個(gè)字節(jié)為一組，再把每組的 3 個(gè)字節(jié)（24 位）轉(zhuǎn)換成 4 個(gè) 6 位，每 6 位根據(jù)查表對(duì)應(yīng)一個(gè) ASCII 符號(hào)，這就是 Base64。



△ Base64 索引表
Base64 將 8 位為一個(gè)單元的字節(jié)數(shù)據(jù)，拆分為 6 位為一個(gè)單元的二進(jìn)制片段。每一個(gè) 6 位單元對(duì)應(yīng) Base64 索引表中的一個(gè)字符。簡(jiǎn)單舉個(gè)例子，下圖中 M 的 ASCII 碼是 77 , 而轉(zhuǎn)換為二進(jìn)制后前六位二進(jìn)制對(duì)應(yīng)值為 19，為 Base64 字典中的 T。








當(dāng)然這里也會(huì)有一個(gè)問(wèn)題，如果要編碼的二進(jìn)制數(shù)據(jù)不是 3 的倍數(shù)，那就會(huì)剩下一至二個(gè)字節(jié)。為此 Base64 使用 000000 字節(jié)值在末尾補(bǔ)足，使其字節(jié)數(shù)能夠被 3 整除，補(bǔ)位用 = 表示，= 的個(gè)數(shù)可表示補(bǔ)了多少字節(jié)，并在解碼時(shí)自動(dòng)去除。總體來(lái)看相比編碼前，Base64 編碼后的字符增加了約 33%。


圖片的 Base64 編碼

前面我們也提到了 Base64 編碼是現(xiàn)在網(wǎng)站小圖片的主要加載方式，那 Base64 到底是如何處理圖片的呢？
我們都知道圖片在網(wǎng)頁(yè)中的使用方法通常是使用 img 標(biāo)簽的形式，而 img 標(biāo)簽的 src 屬性會(huì)指定一個(gè)遠(yuǎn)程服務(wù)器上的資源。在網(wǎng)頁(yè)加載到瀏覽器中時(shí)，瀏覽器會(huì)針對(duì)每個(gè)外部資源都向服務(wù)器發(fā)送一次拉取資源請(qǐng)求。但是這是非常占用網(wǎng)絡(luò)資源的，而且因?yàn)榇蠖鄶?shù)瀏覽器都有并發(fā)請(qǐng)求數(shù)的限制，如果你的網(wǎng)頁(yè)中嵌入了過(guò)多外部請(qǐng)求，就很容易出現(xiàn)頁(yè)面加載速度過(guò)慢的情況。



而 Base64 編碼可以通過(guò) Data URL 技術(shù)讓圖片以字符串的格式直接嵌入頁(yè)面，與 HTML 成為一體。這樣在加載時(shí)就可以避開對(duì)外部資源的請(qǐng)求
為什么選擇 Data URL

至于為什么選擇 Data URL 技術(shù)，是因?yàn)楦鷤鹘y(tǒng)的外部資源引用方式相比，它擁有以下優(yōu)點(diǎn)：
減少 HTTP 請(qǐng)求；

避免跨域問(wèn)題；

可像單獨(dú)圖片一樣使用，比如背景圖片重復(fù)使用等。

通過(guò)這種方式 Base64 編碼可以更為快捷方便得對(duì)前端的各種圖片資源進(jìn)行優(yōu)化。我們看一個(gè)具體的例子：



可以明顯看到 Base64 編碼將一幅圖片數(shù)據(jù)編碼成一串字符串，并使用該字符串代替圖像地址。盡管乍一眼看上去沒(méi)有任何圖片相關(guān)的內(nèi)容，但它最終渲染出的毫無(wú)疑問(wèn)是一張完整的圖片效果。
當(dāng)然使用 Data URL 來(lái)進(jìn)行 Base64 圖片編碼并不是完美的，它有著兩個(gè)不容忽視的缺點(diǎn)：
Base64 編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積 4/3，也就是 Data URL 形式的圖片會(huì)比二進(jìn)制格式的圖片體積大 1/3

Data URL 形式的圖片不會(huì)被瀏覽器緩存

無(wú)法被瀏覽器緩存也就意味著每次訪問(wèn)都需要重新請(qǐng)求資源，這對(duì)于服務(wù)器壓力是比較大的。那有沒(méi)有辦法，能將這些數(shù)據(jù)也放入瀏覽器緩存中呢？
加快加載小技巧

其實(shí)大部分網(wǎng)站的背景圖構(gòu)成，是一個(gè)寬高只有幾個(gè)像素的小圖片，通過(guò)將它平鋪成為背景圖。通常我們將小圖片保存成 GIF 或 PNG 格式，然后在 CSS 的 background-image 屬性中引用圖片地址。但是瀏覽器本身并不在意 URL里寫的是什么，只是需要通過(guò)它獲取需要的數(shù)據(jù)。
所以我們完全可以使用 CSS 樣式文件，讓 Data URL 形式的圖片存儲(chǔ)在 CSS 樣式表中。這樣瀏覽器就會(huì)緩存 CSS 文件，也就會(huì)緩存圖片，能夠進(jìn)一步提高頁(yè)面加載效率。



上圖就是一個(gè)簡(jiǎn)單的使用案例，通過(guò)這種方式既避免了讓背景圖片獨(dú)自產(chǎn)生一次 HTTP 請(qǐng)求的情況，還讓背景圖片和 CSS 文件一起被瀏覽器緩存起來(lái)，避免了每次打開網(wǎng)頁(yè)都加載一次背景圖片的情況，讓改善用戶的瀏覽體驗(yàn)更為快速流暢。
通過(guò) Date URL 技術(shù)與 Base64 編碼的結(jié)合有效減少 HTTP 請(qǐng)求，讓用戶訪問(wèn)體驗(yàn)更好，這其實(shí)是我們一個(gè)開發(fā)過(guò)程中的小技巧，希望看完后能夠帶給大家一些幫助。

作者：李國(guó)鑫

歡迎關(guān)注微信公眾號(hào) ：前端陽(yáng)光