Base64是網絡中存儲和傳輸的二進制數據的常見用法。Base64的壹個字節只能表示64種情況，編碼格式中每個字節的前兩位只能為0，其余六位用於表示內容。
看到這裏，相信大家都能意識到這種編碼格式無法充分利用存儲資源，效率較低。那為什麽它會成為網絡中的常用語呢？
事實上，Base64最早應用於郵件傳輸協議。當時的郵件傳輸協議只支持ASCII字符的傳輸，使用ASCII代碼來表示所有的英文字符和數字以及壹些符號。這裏有壹個問題。如果郵件中只傳輸英文數字，ASCII可以直接支持。但是，如果您要傳輸文件中的圖片、視頻和其他資源，當這些資源轉換為ASCII時，將會出現非英文數字。而且郵件中有很多控制字符，會變成隱形字符。非英文字符和控制字符在傳輸過程中容易出錯，影響郵件的正確傳輸。為此，壹種新的編碼規則誕生了，它將二進制視為壹組3個字節，然後根據查找表將每組的3個字節（24位）轉換為4個6位，每6位對應壹個ASCII符號。這是Base64。
Base64將以8位為單位的字節數據拆分為以6位為單位的二進制片段。每個6位單元對應於Base64索引表中的壹個字符。舉個簡單的例子，下圖中M的ASCII碼是77，二進制轉換後前六位二進制數字對應的值是19，在Base64字典中是T。
當然，這裏也會出現壹個問題。如果要編碼的二進制數據不是3的倍數，就會剩下壹兩個字節。為此，Base64在末尾使用000000字節的值進行補碼，這樣字節數就可以被3整除，補碼用=表示，=的數量可以表示補碼了多少字節，解碼時會自動將其刪除。總體而言，與編碼前相比，Base64編碼後的字符數增加了約33%。
前面我們也提到過Base64編碼是網站加載小圖片的主要方式。那麽Base64如何處理圖片呢？
我們都知道圖像通常以img標簽的形式在網頁中使用，而img標簽的src屬性將指定遠程服務器上的壹個資源。當網頁加載到瀏覽器中時，瀏覽器將向服務器發送每個外部資源的資源拉取請求。但是，這將占用大量網絡資源，並且由於大多數瀏覽器對並發請求的數量有限制，如果您的網頁嵌入了太多外部請求，則很容易出現頁面加載速度緩慢的情況。
Base64編碼可以通過與HTML集成的數據URL技術將圖片以字符串的形式直接嵌入到頁面中。這樣，在加載時可以避免對外部資源的請求。
為什麽選擇數據URL？
至於為什麽選擇數據URL技術，與傳統的外部資源引用方法相比，它具有以下優勢:
這樣，Base64編碼可以更快速、更方便地優化前端的各種圖片資源。讓我們看壹個具體的例子:
可以清楚地看到，Base64編碼將圖片數據編碼成壹個字符串，並使用該字符串代替圖像地址。雖然乍壹看，沒有任何與畫面相關的內容，但毫無疑問，最終呈現的是完整的畫面效果。
當然，使用數據URL編碼Base64圖像並不完美，它有兩個不容忽視的缺點:
無法被瀏覽器緩存意味著每次訪問都需要再次請求資源，這對服務器的壓力很大。有什麽方法可以將這些數據放入瀏覽器緩存中？
加速加載的提示
事實上，大多數網站的背景圖片都是寬度和高度只有幾個像素的小圖片，平鋪成背景圖片。通常我們將小圖片保存為GIF或PNG格式，然後在CSS的background-image屬性中引用圖片地址。但是瀏覽器本身並不關心URL中寫了什麽，只需要通過它獲取所需的數據。
因此，我們可以使用CSS樣式文件在CSS樣式表中以數據URL的形式存儲圖片。這樣，瀏覽器將緩存CSS文件和圖片，這可以進壹步提高頁面加載的效率。
上圖是壹個簡單的用例。這樣既避免了背景圖單獨生成HTTP請求的情況，又使背景圖和CSS文件被瀏覽器緩存，避免了每次打開網頁都加載背景圖的情況，使用戶的瀏覽體驗更加快速流暢。
日期URL技術和Base64編碼的結合可以有效減少HTTP請求，使用戶擁有更好的訪問體驗。這其實是我們開發過程中的壹個小技巧，希望看完之後能給妳帶來壹些幫助。