資訊專欄INFORMATION COLUMN
摘要：編碼原理編碼之所以稱為，是因?yàn)槠涫褂脗€(gè)字符來對(duì)任意數(shù)據(jù)進(jìn)行編碼，同理有編碼。本文學(xué)習(xí)網(wǎng)上資料整理而來，僅供個(gè)人學(xué)習(xí)使用，部分內(nèi)容僅代表個(gè)人理解及思考。
1.什么是Base64
Base64是一種基于64個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的編碼方式，是從二進(jìn)制數(shù)據(jù)到字符的過程。
原則上，計(jì)算機(jī)中所有內(nèi)容都是二進(jìn)制形式存儲(chǔ)的，所以所有內(nèi)容（包括文本、影音、圖片等）都可以用base64來表示。
Base64編碼之所以稱為Base64，是因?yàn)槠涫褂?4個(gè)字符來對(duì)任意數(shù)據(jù)進(jìn)行編碼，同理有Base32、Base16編碼。標(biāo)準(zhǔn)Base64編碼使用的64個(gè)字符為：
有點(diǎn)特殊的是最后兩個(gè)字符，因?qū)ψ詈髢蓚€(gè)字符的選擇不同，Base64編碼又有很多變種，比如用于編碼URL的Base64 URL編碼。
Base64編碼本質(zhì)上是一種將二進(jìn)制數(shù)據(jù)轉(zhuǎn)成文本數(shù)據(jù)的方案。對(duì)于非二進(jìn)制數(shù)據(jù)，是先將其轉(zhuǎn)換成二進(jìn)制形式，然后每連續(xù)6比特（2的6次方=64）計(jì)算其十進(jìn)制值，根據(jù)該值在上面的索引表中找到對(duì)應(yīng)的字符，最終得到一個(gè)文本字符串。
假設(shè)我們要對(duì) Hello! 進(jìn)行Base64編碼，按照ASCII表，其轉(zhuǎn)換過程如下圖所示：
可知 Hello! 的Base64編碼結(jié)果為 SGVsbG8h，每3個(gè)原始字符經(jīng)Base64編碼成4個(gè)字符。那么，當(dāng)原始字符串長(zhǎng)度不能被3整除時(shí)，怎么辦呢？
以 Hello!! 為例，其轉(zhuǎn)換過程為：
Hello!! Base64編碼的結(jié)果為 SGVsbG8hIQAA?？梢?，不能被3整除時(shí)會(huì)采用來來補(bǔ)0的方式來完成編碼。
需要注意的是：標(biāo)準(zhǔn)Base64編碼通常用 = 字符來替換最后的 A，即編碼結(jié)果為 SGVsbG8hIQ==。因?yàn)?= 字符并不在Base64編碼索引表中，其意義在于結(jié)束符號(hào)，在Base64解碼時(shí)遇到 = 時(shí)即可知道一個(gè)Base64編碼字符串結(jié)束。
就前端而言，對(duì)于一些簡(jiǎn)單的圖片，為了減少外部資源加載，降低頁面加載時(shí)間，可以采用base64將圖片編碼成字符串，直接內(nèi)嵌到頁面中。這種內(nèi)嵌方式的實(shí)現(xiàn)，得益于大部分瀏覽器對(duì)Data URI scheme特性的支持，該特性通常會(huì)在CSS設(shè)置背景圖片時(shí)用到，其格式為：
background:url(data:文件類型;編碼方式,編碼后的文件內(nèi)容);
也可通過img標(biāo)簽嵌入圖片：
下面說下具體使用方法（以icon圖標(biāo)為例）：
下載或制作所需圖標(biāo)；
使用base64在線編碼工具，將圖標(biāo)編碼成字符串；
將得到的字符串復(fù)制到你的前端代碼中使用（例如background:url(字符串)）
4.適用場(chǎng)景一般適用于比較小、色彩層次單一的圖片（如icon圖標(biāo)），不要試圖用于色彩豐富的較大圖片，盡管能夠?qū)崿F(xiàn)展現(xiàn)，但由于編碼后的字符串非常大，會(huì)明顯增大HTML/CSS文件的大小，影響加載速度。
本文學(xué)習(xí)網(wǎng)上資料整理而來，僅供個(gè)人學(xué)習(xí)使用，部分內(nèi)容僅代表個(gè)人理解及思考。
主要參考：
http://blog.xiayf.cn/2016/01/...
http://blog.csdn.net/zdy0_200...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112951.html
摘要：認(rèn)證服務(wù)器，即服務(wù)提供商專門用來處理認(rèn)證的服務(wù)器。它與認(rèn)證服務(wù)器，可以是同一臺(tái)服務(wù)器，也可以是不同的服務(wù)器。客戶端使用上一步獲得的授權(quán)，向認(rèn)證服務(wù)器申請(qǐng)令牌。認(rèn)證服務(wù)器對(duì)客戶端進(jìn)行認(rèn)證以后，確認(rèn)無誤，同意發(fā)放令牌。 最近想做個(gè)小程序，需要用到授權(quán)認(rèn)證流程。以前項(xiàng)目都是用的 OAuth2 認(rèn)證，但是Sanic 使用OAuth2 不太方便，就想試一下 JWT 的認(rèn)證方式。這一篇主要內(nèi)容是 ...
摘要：策略模式由兩部分構(gòu)成一部分是封裝不同策略的策略組，另一部分是。策略模式的典型應(yīng)用場(chǎng)景是表單校驗(yàn)中，對(duì)于校驗(yàn)規(guī)則的封裝。然而圖像的壓縮及上傳錯(cuò)誤處理等部分是公用的。遂考慮使用策略模式封裝。 淺談 JavaScript 中策略模式的使用： 什么是設(shè)計(jì)模式 什么是策略模式 策略模式在 JavaScript 中的應(yīng)用（使用策略模式封裝百度AI識(shí)別調(diào)用） 策略模式在 Vue 組件封裝中的應(yīng)用（...
摘要：要注意老舊的瀏覽器不支持的特性，它會(huì)繼續(xù)正常加載屬性引用的圖像。五安全地使用圖片的優(yōu)勢(shì)這里不再贅述，簡(jiǎn)單來說 這篇文章，我們將一起探討，web應(yīng)用中能對(duì)圖片進(jìn)行什么樣的優(yōu)化，以及反思一些負(fù)優(yōu)化手段 一、為什么要對(duì)圖片進(jìn)行優(yōu)化 對(duì)于大多數(shù)前端工程師來說，圖片就是UI設(shè)計(jì)師(或者自己)切好的圖，你要做的只是把圖片丟進(jìn)項(xiàng)目中，然后用以鏈接的方式呈現(xiàn)在頁面上，而且我們也經(jīng)常把精力放在項(xiàng)目的打包...
摘要：先簡(jiǎn)單介紹下，通常情況下我們將其稱之為鏡像，鏡像是由多個(gè)層組成的文件，這些層用于在容器內(nèi)執(zhí)行代碼命令等。而的時(shí)候則會(huì)將此信息再次進(jìn)行編碼。 使用 Docker 時(shí)，最常用的命令無非是 docker container 和 docker image 相關(guān)的子命令，當(dāng)然最初沒有管理類命令（或者說分組）的時(shí)候，最常使用的命令也無非是 docker run docker commit dock...
摘要：先簡(jiǎn)單介紹下，通常情況下我們將其稱之為鏡像，鏡像是由多個(gè)層組成的文件，這些層用于在容器內(nèi)執(zhí)行代碼命令等。而的時(shí)候則會(huì)將此信息再次進(jìn)行編碼。 使用 Docker 時(shí)，最常用的命令無非是 docker container 和 docker image 相關(guān)的子命令，當(dāng)然最初沒有管理類命令（或者說分組）的時(shí)候，最常使用的命令也無非是 docker run docker commit dock...
閱讀 2434·2021-11-18 10:02
閱讀 693·2021-10-08 10:04
閱讀 2263·2021-09-03 10:51
閱讀 3549·2019-08-30 15:44
閱讀 2806·2019-08-29 14:09
閱讀 2470·2019-08-29 12:21
閱讀 2068·2019-08-26 13:45
閱讀 1810·2019-08-26 13:25
