什么是base64编码

图片的base64编码就是可以将一张图片数据编码成一串字符串，使用该字符串代替图像地址url。

使用base64图片的优点

在前端页面中常见的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图片的优点有一下几种
1、减少http请求次数
2、采用base64的图片随着页面一起下载，因此不会存在跨域请求的问题
3、没有图片更新要上传图片，因此不会造成清理图片缓存的问题

使用base64图片的缺点

1、增加css文件的大小
2、浏览器兼容性
3、解析css的时间增长

base64图片与cssprites技术

cssprites技术就是将多个图片合成一个大的图片，将多次图片请求合成一张大图的请求，以此来达到减少http请求的次数。

使用cssprites合成一张大图的优缺点

• 页面具有多种风格，需要换肤功能，可使用CssSprites
• 图片不随意改动
• 使用时无需重复图形的内容
• 没有base64编码成本，降低图片更新的维护难度
  -不会增加css文件体积

使用base64直接把图片编码成字符串写入css文件：

• 无额外请求
• 对于极小或者及简单图片
  -可像独立图片一样使用，比如背景图片重复使用等
• 没有跨域问题，无需考虑缓存，文件头或者cookies问题

对于base64图片常见误区

base64虽有优点，但是其缺点也很明显，在使用上存在一些明显的缺陷
1、使用base64不代表性能优化，使用base64减少了http请求，但是增加了css文件的体积，css文件体积增大意味着CRP的阻塞

CRP（Critical Rendering Path，关键渲染路径）：当浏览器从服务器接>收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏>览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路
径”。

三级

图片不会导致关键渲染路径的阻塞，而转换为base64后大大增加了css文件的体积，css文件的体积直接影响渲染，导致空白屏幕时间增长，html和css会阻塞渲染，而图片不会阻塞渲染