做爱网站中文字幕,黄色免费观看网站,99热精品在线播放,久久视频黄,操B在线免费视频,日本AⅤ在线,字幕一区二区三区四区五区在线看 ,青青操青青操在线视频免费

點擊上方?前端陽光，關(guān)注公眾號

回復(fù)加群，加入技術(shù)交流群交流群

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

什么是 Base64

Base64 是網(wǎng)絡(luò)中存儲和傳輸?shù)亩M制數(shù)據(jù)的普遍用法。Base64 一個字節(jié)只能表示 64 種情況，且編碼格式每個字節(jié)的前兩位都只能是 0，使用剩下的 6 位表示內(nèi)容。

看到這里相信大家也能夠意識到，這種編碼格式無法充分利用存儲資源，效能較低。那為什么還會成為網(wǎng)絡(luò)中的普遍用法呢？

其實 Base64 最早是應(yīng)用在郵件傳輸協(xié)議中的。當(dāng)時郵件傳輸協(xié)議只支持 ASCII 字符傳遞，使用 ASCII 碼來表示所有的英文字符和數(shù)字還有一些符號。這里有一個問題，如果郵件中只傳輸英文數(shù)字等，那么 ASCII 可以直接支持。但是如果要在文件中傳輸圖片、視頻等資源的話，這些資源轉(zhuǎn)成 ASCII 的時候會出現(xiàn)非英文數(shù)字的情況。而且郵件中還存在很多控制字符，這些控制字符又會成為不可見字符。非英文字符和控制字符在傳輸過程中很容易產(chǎn)生錯誤，影響郵件的正確傳輸。為此才有了誕生了一個新的編碼規(guī)則，把二進制以 3 個字節(jié)為一組，再把每組的 3 個字節(jié)（24 位）轉(zhuǎn)換成 4 個 6 位，每 6 位根據(jù)查表對應(yīng)一個 ASCII 符號，這就是 Base64。

△ Base64 索引表

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

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

圖片的 Base64 編碼

前面我們也提到了 Base64 編碼是現(xiàn)在網(wǎng)站小圖片的主要加載方式，那 Base64 到底是如何處理圖片的呢？

我們都知道圖片在網(wǎng)頁中的使用方法通常是使用 img 標(biāo)簽的形式，而 img 標(biāo)簽的 src 屬性會指定一個遠(yuǎn)程服務(wù)器上的資源。在網(wǎng)頁加載到瀏覽器中時，瀏覽器會針對每個外部資源都向服務(wù)器發(fā)送一次拉取資源請求。但是這是非常占用網(wǎng)絡(luò)資源的，而且因為大多數(shù)瀏覽器都有并發(fā)請求數(shù)的限制，如果你的網(wǎng)頁中嵌入了過多外部請求，就很容易出現(xiàn)頁面加載速度過慢的情況。

而 Base64 編碼可以通過 Data URL 技術(shù)讓圖片以字符串的格式直接嵌入頁面，與 HTML 成為一體。這樣在加載時就可以避開對外部資源的請求

為什么選擇 Data URL

至于為什么選擇 Data URL 技術(shù)，是因為跟傳統(tǒng)的外部資源引用方式相比，它擁有以下優(yōu)點：

減少 HTTP 請求；
避免跨域問題；
可像單獨圖片一樣使用，比如背景圖片重復(fù)使用等。

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

可以明顯看到 Base64 編碼將一幅圖片數(shù)據(jù)編碼成一串字符串，并使用該字符串代替圖像地址。盡管乍一眼看上去沒有任何圖片相關(guān)的內(nèi)容，但它最終渲染出的毫無疑問是一張完整的圖片效果。

當(dāng)然使用 Data URL 來進行 Base64 圖片編碼并不是完美的，它有著兩個不容忽視的缺點：

Base64 編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積 4/3，也就是 Data URL 形式的圖片會比二進制格式的圖片體積大 1/3
Data URL 形式的圖片不會被瀏覽器緩存

無法被瀏覽器緩存也就意味著每次訪問都需要重新請求資源，這對于服務(wù)器壓力是比較大的。那有沒有辦法，能將這些數(shù)據(jù)也放入瀏覽器緩存中呢？

加快加載小技巧

其實大部分網(wǎng)站的背景圖構(gòu)成，是一個寬高只有幾個像素的小圖片，通過將它平鋪成為背景圖。通常我們將小圖片保存成 GIF 或 PNG 格式，然后在 CSS 的 background-image 屬性中引用圖片地址。但是瀏覽器本身并不在意 URL里寫的是什么，只是需要通過它獲取需要的數(shù)據(jù)。

所以我們完全可以使用 CSS 樣式文件，讓 Data URL 形式的圖片存儲在 CSS 樣式表中。這樣瀏覽器就會緩存 CSS 文件，也就會緩存圖片，能夠進一步提高頁面加載效率。

上圖就是一個簡單的使用案例，通過這種方式既避免了讓背景圖片獨自產(chǎn)生一次 HTTP 請求的情況，還讓背景圖片和 CSS 文件一起被瀏覽器緩存起來，避免了每次打開網(wǎng)頁都加載一次背景圖片的情況，讓改善用戶的瀏覽體驗更為快速流暢。

通過 Date URL 技術(shù)與 Base64 編碼的結(jié)合有效減少 HTTP 請求，讓用戶訪問體驗更好，這其實是我們一個開發(fā)過程中的小技巧，希望看完后能夠帶給大家一些幫助。

往期推薦

優(yōu)秀文章匯總：https://github.com/Sunny-lucking/blog

內(nèi)推：https://www.yuque.com/peigehang/kb

技術(shù)交流群

我組建了技術(shù)交流群，里面有很多?大佬，歡迎進來交流、學(xué)習(xí)、共建?；貜?fù)?加群?即可。后臺回復(fù)「電子書」即可免費獲取?27本?精選的前端電子書！回復(fù)內(nèi)推，可內(nèi)推各廠內(nèi)推碼

???“分享、點贊、在看” 支持一波??

Base64 編碼知識，一文打盡！Base64圖片能不能被緩存？

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