前端培训丁鹿学堂：前端性能优化css篇（一）

css使用字体图标

使用字体图标的好处

1. 放大以后不会失真
2. 可以很方便设置图标的颜色
3. 字体图标比图片占用资源少，可以作为性能优化的点。

字体图标的使用

使用阿里巴巴矢量图标库可以使用字体图标。 1.进入阿里巴巴iconfont字体网站，选择自己想要的图标，加入到购物车。 2.点击购物车，选择下载代码 3.下载的是一个压缩文件，解压后把incofont.ttf 和iconfont.css放入到自己的项目文件里 4 在使用页面中引入css文件，使用的哪个图标，就去找对应的类名即可。 对应的类名在下载的demo_index.html里查找即可

<link rel="stylesheet" href="./iconfont.css">
 <i class="iconfont icon-1"></i>

css使用精灵图

精灵图又称雪碧图，来源于英文sprite，是一种图片合成技术，将各种小图片合并到一个大图片上，利用css的背景图定位显示不同的图标。

使用精灵图的好处

1.减小网页http请求的数量，加快网页响应速度，减少服务器压力 2.减少图片的总大小

具体使用

本质上是利用背景图定位显示不同的小图标。

    <style>
        .spriticon{
            background-image: url(../imgs/xx.png);
            background-repeat: no-repeat;
            background-position: -200px 90px;
            display: inline-block;
            width:100px;
            height: 100px;
        }
    </style>