前端优化：css雪碧图实践应用详解

一 为什么需要使用雪碧图

二CSS雪碧图原理及应用

 

前端是接近用户体验的一个项目组成部分，合适的优化能够大大减少网页响应时间，合理的资源加载自然成为了工作中的要务，现在就结合实例讲解到底什么是css雪碧图，以及工作中的实际应用。

一 、为什么需要使用雪碧图

比方说现在经理要我们给页面添加一个侧边任务栏，效果如下： 
这里写图片描述 
呵呵，作为一名资（too）深（young）的前端，我刷刷刷为页面增加ul还有几个然后再给每个li添加背景图片，哈哈，任务就这么完成了，然后commit了一下自己的代码。此处应该要有代码

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>雪碧图实例</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <ul class="function">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
  • css部分
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-size: 18px;
}

.function {
  list-style: none;
  display: inline-block;
}
.function li {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  background: #E0E0E0;
  background-repeat: no-repeat;
}
.function li:nth-child(1) {
  background-image: url(../img/all.png);
}
.function li:nth-child(2) {
  background-image: url(../img/back.png);
}
.function li:nth-child(3) {
  background-image: url(../img/cart.png);
}
.function li:nth-child(4) {
  background-image: url(../img/Category.png);
}
.function li:nth-child(5) {
  background-image: url(../img/close.png);
}

 

但是等到项目上线的时候，经理说小徐啊，这网页响应有点慢啊！怎么可能！于是我打开chrome按下F12查看network 
这里写图片描述
我们可以看到这里有几张不到1k的小图片就这点大小还占用了5个请求，网页响应变慢了也不难理解。于是这时候css雪碧图就出现！

二、CSS雪碧图原理及应用

原理：把小图标合成一张大图，通过给元素的公共css设置background-image为该合成图，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图，然后再给每个元素单独微调其background-position。把多个请求合并成一个。

步骤：

  1. 合并图片 
    首先我们要对图片进行合并，方式有很多种，可以通过gulp，webpack等构建工具或者一些在线工具，这里提供一个很好用的在线的图片合并网站 
    http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css

  2. 设置css（此处必须有代码）

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: 18px;
}

.function {
    list-style: none;
    display: inline-block;
}

.function li {
    width: 33px;
    height: 33px;
    margin-bottom: 5px;
    background: #E0E0E0;
    background-image: url(../img/result.png); /*result.png为合并后的图片*/
    background-repeat: no-repeat;
}

.function li:nth-child(1) {
    background-position: 0 0;
}

.function li:nth-child(2) {
    background-position: 0 -35px;
}

.function li:nth-child(3) {
    background-position: 0 -72px;
}

.function li:nth-child(4) {
    background-position: 0 -110px;
}

.function li:nth-child(5) {
    background-position: 0 -145px;
}

 

  • 效果： 这时候我们再打开chrome的network查看请求数 
    这里写图片描述
    有没有发现呢？原本的5个图片请求变成了1个。这时候我们可以再次自信的跟经理说，问题解决啦！
posted @ 2018-07-02 22:45  tianyou_songyk  阅读(435)  评论(0)  编辑  收藏  举报