页面级优化——icon图标显示方式

css sprite

又称精灵图或雪碧图，如下图所示。具体来讲就是多个小图合成大图，通过background-position来显示不同图片

优点，减少http请求次数，提高图片加载速度，缺点，图片需要通过软件或者其他方式生成，如果有删改的话，不是很方便

Data URI

示例如下，简而言之就是将图片转换为代码

data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

优点，无需任何额外的HTTP 请求，缺点不受IE 浏览器的支持，base64[8]编码在不启用GZIP[9]压缩时会明显增加图片的大小，有删改的话，长编码看起来也很麻烦。

字体图标

把图片转换成字体，类似于字体设计，需要下载字体文件，下面为例子

//导入
.el-icon-info:before{content:"\e61a"}
//使用
<i class="el-icon-info"></i>

优点，因为是字体，显示速度很快，而且能够改变字体颜色和大小，缺点，制作起来比较麻烦，用别的现成的库可能需要图标没有的情况。

直接引用

直接引用，例子如下：

<img src="1.jpg"/>

优点，删改起来快，缺点加载速度慢，占用资源