什么是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会阻塞渲染，而图片不会阻塞渲染
