什么是base64編碼

圖片的base64編碼就是可以將一張圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址url。

使用base64圖片的優(yōu)點(diǎn)

在前端頁面中常見的base64圖片的引入方式有

//在css中使用base64圖片
.header {
    background-image: url(data:image/png;base64,iVBORw0...);
}

//在html中使用base64圖片
<img src="data:image/gif;base64,base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQE.....>

使用base64圖片的優(yōu)點(diǎn)有一下幾種
1、減少http請求次數(shù)
2、采用base64的圖片隨著頁面一起下載，因此不會(huì)存在跨域請求的問題
3、沒有圖片更新要上傳圖片，因此不會(huì)造成清理圖片緩存的問題

使用base64圖片的缺點(diǎn)

1、增加css文件的大小
2、瀏覽器兼容性
3、解析css的時(shí)間增長

base64圖片與cssprites技術(shù)

cssprites技術(shù)就是將多個(gè)圖片合成一個(gè)大的圖片，將多次圖片請求合成一張大圖的請求，以此來達(dá)到減少http請求的次數(shù)。

使用cssprites合成一張大圖的優(yōu)缺點(diǎn)

• 頁面具有多種風(fēng)格，需要換膚功能，可使用CssSprites
• 圖片不隨意改動(dòng)
• 使用時(shí)無需重復(fù)圖形的內(nèi)容
• 沒有base64編碼成本，降低圖片更新的維護(hù)難度
  -不會(huì)增加css文件體積

使用base64直接把圖片編碼成字符串寫入css文件：

• 無額外請求
• 對(duì)于極小或者及簡單圖片
  -可像獨(dú)立圖片一樣使用，比如背景圖片重復(fù)使用等
• 沒有跨域問題，無需考慮緩存，文件頭或者cookies問題

對(duì)于base64圖片常見誤區(qū)

base64雖有優(yōu)點(diǎn)，但是其缺點(diǎn)也很明顯，在使用上存在一些明顯的缺陷
1、使用base64不代表性能優(yōu)化，使用base64減少了http請求，但是增加了css文件的體積，css文件體積增大意味著CRP的阻塞

CRP（Critical Rendering Path，關(guān)鍵渲染路徑）：當(dāng)瀏覽器從服務(wù)器接>收到一個(gè)HTML頁面的請求時(shí)，到屏幕上渲染出來要經(jīng)過很多個(gè)步驟。瀏>覽器完成這一系列的運(yùn)行，或者說渲染出來我們常常稱之為“關(guān)鍵渲染路
徑”。

三級(jí)

圖片不會(huì)導(dǎo)致關(guān)鍵渲染路徑的阻塞，而轉(zhuǎn)換為base64后大大增加了css文件的體積，css文件的體積直接影響渲染，導(dǎo)致空白屏幕時(shí)間增長，html和css會(huì)阻塞渲染，而圖片不會(huì)阻塞渲染