页面级优化——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"/>

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

页面级优化——icon图标显示方式相关推荐

系统（HTML页面）设置icon图标
从系统安全及使用便捷等角度出发,设置系统页面的icon图标是基本常识,设置方法如下,备用. <link rel="icon" href="./images/favi ...
前端页面使用的icon图标
一,进入https://www.iconfont.cn/ ,这个是阿里巴巴员工的图标库点击帮助,点击代码应用,这里面有对这个网站的使用教程二,使用流程 1,文字解说: 点击图标库-->搜索关 ...
elementUI更改icon图标尺寸、圆形按钮尺寸方法，以及css修改页面没变化为题
icon图标尺寸修改在做博客的时候,用到了element的图标,却修改不了大小,后来知道这个图标是通过font-size设置大小. html代码: <i class="el-icon ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
【ElementUI组件优化】自定义icon图标的使用
风雨里做个大人,阳光下做个小孩. 前端经常会用到UI提供的各种图表,推荐阿里的图标库.如果UI要求不是很严格,我们可以自己在图标库中找到想要的图标. 搜索之后可以点击下载. 在ElementUI中使用 ...
网站页面性能优化的34条黄金守则
1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可 ...
从微博的改版谈网页重构——bigpipe中的页面构建优化
题记:搞互联网的同学也许都知道一个数字--4秒,有研究表明,如果一个网站没有在4秒之内加载完成,用户就会感到焦躁不愉快,并离开这个网站(数据来自性能测试网站http://gtmetrix.com/). ...
重度使用Flutter研发模式下的页面性能优化实践
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...
web页面性能优化及SEO优化
web页面性能优化前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...