forked from ptteng/PPT
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-7-sprites.html
252 lines (236 loc) · 13.3 KB
/
css-7-sprites.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="../../css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="../../css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="../../lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>什么是CSS SPRITES？</h2>
<p>分享人：伊文秋</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section style="text-align: left;">
<p>在计算机图形学中，sprites指的是包含于场景中的二维图像或者动画。</p>
<p style="text-align: justify;word-break: break-all">最开始这项技术是应用于街机游戏中，里面的人物和可移动物品大多数都是应用了sprites，为啥要叫sprites（精灵）呢？</p>
</section>
<section style="text-align: left;">
<p>精灵并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中的数据之上，没有对其中的数据产生影响，就像幽灵和精灵一样。</p>
</section>
<section style="text-align: left;">
<p>CSS精灵也差不多是这个意思，可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。</p>
</section>
<section >
<img src="../zhazha-img/sprites.gif">
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section style="text-align: left;">
<p> 那这项技术为啥能减少http请求呢？<br>
到这里就要提一下，浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。</p>
</section>
<section style="text-align: left;">
<p>而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。</p>
</section>
<section style="text-align: left;">
<p>所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。有同学可能会问了，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？</p>
</section>
<section style="text-align: left;">
<p>还有一个好处，这样不但快了，还省流量了，因为HTTP请求-响应会在客户端和服务器端交互HTTP报文，所以下载一个图片所用流量不只是图片大小，每个HTTP报文会占用网络流量的。也许有同学会问，谁会在乎那点而流量，你别说还真有人在乎，如果你不是自己机房，而是把服务器放在别人机房就知道流量也是很贵的，如果你的网站每天被访问数十亿次，这点儿流量就会让你肉疼了。更别说对众多的手机用户了，流量都是钱呐！</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
如何实现CSS sprites
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section style="text-align: left;">
<p>1.我们需要找到需要使用的小图标，然后对图标进行切图，切出来我们需要的图片或者图标。</p>
<p>2.将这些切好的图片拼接在一起,这里我们可以使用photoshop，但是更好的是很多前辈制作了许多sprites图生成工具，也就是俗称的雪碧图生成工具，下面我给大家演示一下。</p>
</section>
<section style="text-align: left;">
<p>好了，我们做好需要使用的雪碧图，现在需要将这个图应用到我们的网页中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。根据雪碧图中图标的具体像素大小，再规定元素的具体大小，然后使用background-position找到图标的位置。元素大小相当于相机机头，background-position相当于移动相机找到我们需要的景物，下面给大家简单的演示一下。 </p></section>
<section style="text-align: left;">
<p>
1. 假设合成之后的雪碧图宽是 W1, 需要显示的子图片宽度是 W2, 以子图为背景的标签宽度是 W3，background-size的宽度是x<br>
2. 有公式 x/W3 = W1/W2 => x = W1*W3/W2<br>
3. 所以 background-size 的宽度值为 W1*W3/W2
</p>
</section>
<section style="text-align: left;">
<p>优点</p>
<p>上面也提到了，通过减少下载图片的数量以减少http请求数量，减少http报文，节省流量，增加访问速度，提高网页的性能。这是它最大的优点。</p>
</section>
<section style="text-align: left;">
<p>缺点</p>
<p>1.每次制作雪碧图都很繁琐，增大前端和UI的工作量。</p>
<p>2.雪碧图制作完成之后，维护特别困难，每次要加或者换图片都需要重新制作一整张图片。</p>
<p>3.难以实现自适应，图片的大小都限定死了。</p>
<p>4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。</p>
</section>
<section style="text-align: justify;word-break: break-all">
<p>前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。</p>
</section>
</section>
<section>
<section>
<h3>5.编码实战</h3>
</section>
<section>
<p><a href="https://www.toptal.com/developers/css/sprite-generator" target="_blank">sprites </a> </p>
</section>
<section>
<p><a href="http://student.task.web.ptteng.com/yiwenqiu/css/task-6/task-6.html" target="_blank">demo </a> </p>
</section>
</section>
<section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p> 雪碧图如何自适应</p>
</section>
<section style="text-align: justify;word-break: break-all">
<p>雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸</p>
<p>把整图整体缩放</p>
<p>...你别用雪碧图啊 不要死心眼 就是这样</p>
</section>
<section>
<img src="../zhazha-img/spt1.png">
<img src="../zhazha-img/spt2.png">
</section>
<section>
<p> 雪碧图常用在哪里</p>
</section>
<section>
<img src="../zhazha-img/apple.jpg">
<p>
<a href="https://www.apple.com/cn/" target="_blank">
apple
</a>
</p>
</section>
<section>
<img src="../zhazha-img/amazon.png">
<p>
<a href="https://www.amazon.cn/Kindle%E7%94%B5%E5%AD%90%E4%B9%A6/b/ref=sv_kinc_3?ie=UTF8&node=116169071" target="_blank">
亚马逊
</a>
</p>
</section>
<section>
<p>CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。
</p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p>参考一：
<a href="https://zh.wikipedia.org/wiki/精灵_(计算机图形学)#CSS_Sprite" target="_blank">
Wiki百科 sprites
</a>
</p>
<p>参考二：
<a href="http://www.cnblogs.com/aaronjs/p/4744014.html" target="_blank">
雪碧图如何自适应
</a>
</p>
<p>参考三：
<a href="http://www.cnblogs.com/2050/p/3877280.html" target="_blank">
移动前端开发之viewport的深入理解
</a>
</p>
</section>
</section>
<section>
<section>
<h3>8.更多讨论</h3>
</section>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p><small>BY : 伊文秋</small></p>
</section>
</div>
</div>
<script src="../../lib/reveal/js/head.min.js"></script>
<script src="../../lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
{ src: '../plugin/notes/notes.js', async: true },
{ src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>