前端优化：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。把多个请求合并成一个。
步骤：
合并图片
首先我们要对图片进行合并，方式有很多种，可以通过gulp，webpack等构建工具或者一些在线工具，这里提供一个很好用的在线的图片合并网站
http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css设置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个。这时候我们可以再次自信的跟经理说，问题解决啦！
前端优化：css雪碧图实践应用详解的更多相关文章
- css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
- CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...
- CSS雪碧图（精灵图）使用
1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...
- css雪碧图实现数字切换
vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...
- css雪碧图压缩
cssgaga下载地址 链接: https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A 提取码: stqe CssGaga功能特性 合并import的CSS文件 ...
- css sprite，css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- css 雪碧图的制作
很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"&g ...
随机推荐
- Qt QDialog将窗体变为顶层窗体（activateWindow(); 和 raise() ）
m_pLoginDlg->hide(); m_pLoginDlg->activateWindow(); //m_pLoginDlg->raise(); m_pLoginDlg-> ...
- 我要为运维说一句，我们不是网管，好不！！Are you know？
运维 运维,这里指互联网运维,通常属于技术部门,与研发.测试.系统管理同为互联网产品技术支撑的4大部门,这个划分在国内和国外以及大小公司间都会多少有一些不同. 一个互联网产品的生成一般经历的过程是:产 ...
- css tips: 清除float影响，containing的div跟随floated sub等
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * content ...
- mangodb驱动编译
1.Installing the MongoDB C Driver (libmongoc) and BSON library (libbson) Building on Windows with Vi ...
- 阅读MySQL文档第21章摘抄
触发程序是与表相关的数据库对象. mysql> CREATE TABLE account (acct_num INT, amount DECIMAL(10,2)); Query OK, 0 ro ...
- BZOJ4602:[SDOI2016]齿轮(并查集)
Description 现有一个传动系统,包含了N个组合齿轮和M个链条.每一个链条连接了两个组合齿轮u和v,并提供了一个传动比x : y.即如果只考虑这两个组合齿轮,编号为u的齿轮转动x圈,编号为v ...
- 【[HNOI2006]超级英雄】
看到楼下有大佬说了网络流做法,来给大佬配个代码 我们只有我可能都觉得如果不动态加边的话\(dinic\)可能跑不了这种需要中途退出的二分图匹配 正当我准备去敲匈牙利的时候突然想到这个题可以二分啊 于是 ...
- 【[JLOI2013]卡牌游戏】
思路太妙了 刚开始yy出了一种比较自然的dp方法,就是按照游戏的进行来开始dp,设\(dp[i][j]\)表示第\(i\)个人为庄家,还剩下\(j\)个人的概率为多少,但是很快发现这个样子没法转移,因 ...
- EOJ Monthly 2019.1 唐纳德先生与这真的是签到题吗 【数学+暴力+multiset】
传送门:https://acm.ecnu.edu.cn/contest/126/ C. 唐纳德先生与这真的是签到题吗 单测试点时限: 6.0 秒 内存限制: 1024 MB 唐纳德先生在出月赛的过程中 ...
- 1spring注解：@Configuration，@Bean，@ComponentScan(），@Scope
传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点:1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分开.xml文件 ...