使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大
神马是CSS 小妖精
CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
使用过jQuery UI 的同学可定见过这种图片
很多页面常用的小图标,但是我们看看每个小图标的源码的时候会发现,这些小图标的src是同一个文件,都是这张大图
为什么要使用CSS小妖精
姑且先不管这是怎么实现的,我们先来了解一下又好好的方法它不用为什么要用这种怪异的方式,在代码书写和可读性上都有了一定程度的开销,这么干有什么好处能让人们放弃安逸的做法来用CSS sprites呢?
我们知道浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载,JS是堵塞HTML下载进程的,图片是另外开启进程来下载的,不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个,反正是有限制的,所以如果一个遍布了图片的网页,或者一系列网页,即使你网速再快也要分批次的下载这些图片。
而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应,在现在网速条件下不超过200k的图片下载速度是差不多的,下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存,不会带来反复下载的开销,所以只有一个HTTP请求-响应。
所以使用CSS sprites最大的好处就是减少HTTP请求,加快网站响应速度,提高网站性能。有同学可能会问了,多几个HTTP请求真的会那么严重吗?如果使用一张大图,那么很可能大图中有几个图片用不到,这不是多加载内容了吗,和多几次HTTP请求开销差距有那么大吗?
公司小伙伴儿问过我类似问题,我举了个例子,我在北京,你是我的马仔,有天我读了苏东坡文集,兴致来了想吃广东的荔枝,自然是马仔去买,然后你去银行取钱,坐地铁、搭火车、开飞机跑到广东买了串荔枝回北京,拎一串荔枝回来不太累,主要是北京到广州太折腾,明天我又来兴致了,再给我买一串差不多的来,你又去银行取钱、跑一趟广州,不料我读了一个月的苏东坡文集,你要是天天这么跑不得发疯,大家都会想到,看你这么爱吃荔枝,一次买一箱回来,拎着是有些累,但好过一次次的折腾。
在这个例子中去银行取钱就是浏览器准备HTTP报文,跑广州再回来就是一个HTTP请求-响应过程,荔枝自然就是response了,虽然HTTP请求-响应过程没有跑广州那么累,但因为HTTP协议是无连接的,一次请求结束后就断开,每次都这样也挺累的,就跑一次拿回一张大图来还是比较轻松的,当然你大图内不能就三四张小图。。。
还有一个好处,这样不但快了,还省流量了,因为HTTP请求-响应会在客户端和服务器端交互HTTP报文,所以下载一个图片所用流量不只是图片大小,每个HTTP报文会占用网络流量的。也许有同学会问,谁会在乎那点而流量,你别说还真有人在乎,如果你不是自己机房,而是把服务器放在别人机房就知道流量也是很贵的,如果你的网站每天被访问数十亿次,这点儿流量就会让你肉疼了,不知道大家看过Google首页Page Source没有,截取一部分,可以发现,人家连HTML的换行符、缩进、空格都给省了,你说图的是可读性吗
更别说对广大手机党来说,流量也是要看的,如果一个网站访问要花很多流量,我是不会用手机看来看去的
CSS小妖精实现方法
明白了为什么要这么做,我们就可以看看该怎么来做了,先有世界观再有方法论,首先了解一下CSS的background-position
background-position 设置或检索对象的背景图像位置。必须先指定 background-image 属性。
语法:
background-position : length || length
background-position : position || position
取值:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right
这是jQuery UI上取下来的两张图片,分别是icon普通和hover是的样子,每个小图是16px * 16px,每张图片有15行16列,当然有的部分没有图片,下面的demo会有很多部分有空白。
.icon{background-image:url( images/normal.png);background-repeat:no-repeat;height:16px;width:16px;float:left;margin:4px;background-color:#ccc;}.icon:hover{background-image:url( images/hover.png);background-color:#f1f1f1;}#test{width:385px;overflow:hidden;margin:50px;border:dashed 1px #ccc;}
<div id="test"></div>
$(function () {var icons = new Array();var iconWidth = 16, iconHeight = 16, columns=16, rows = 15;for (var i = 0; i < rows; i++){for (var j = 0; j < columns; j++) {var position = -iconWidth * j + 'px ' + -iconWidth * i;icons.push('<div class="icon" style="background-position: ' + position + ';"></div>')}}$('#test').html(icons.join(''));});
最终效果如下图
这样就实现了使用一张大图来代替很多小的icon图标,来减少HTTP请求,提高网站性能。
CSS小妖精额外福利
使用CSS splites还有一个额外的好处,如果我们使用的图标内容是透明的,而边框是白色(和网站背景颜色相同),我们可以通过简单的CSS来使整个网站的icon改变,这个在换theme的时候很贴心,关于这个的图提介绍可以看看CSS背景色镂空技术实际应用及进阶
使用CSS sprites减少HTTP请求相关推荐
- Web优化 --利用css sprites降低图片请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中 ...
- css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
- CSS sprites
CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的"back ...
- CSS Sprites (CSS精灵)
CSS Sprites原理CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgroun ...
- CSS Sprites图片拼合生成器实现思路
在对WEB前端做性能优化时,为了有效减少http请求数,通常会把Web用到的图片合并成一张大图,采用CSS的background-position 属性,控制页面的图片显示. 问题是,目前虽然有这么一 ...
- CSS Sprites图片合并
CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度. 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位. .icons{ ...
- 每日一个css效果之css sprites
为什么要是用css sprites CSS Sprites are the preferred method for reducing the number of image requests. Co ...
- 《高性能网站建设指南》笔记-2 规则1——减少HTTP请求
前一篇的性能黄金法则(Performance Golden Rule)揭示了只有10%-20%的最终用户响应时间花在接收所请求的HTML文档上.剩下的80%-90%时间花在为HTMl文档所引用的所有组 ...
- 前端性能优化-减少HTTP请求数
1.图片地图 图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置. 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数. 2) 使用 ...
最新文章
- lvs+keepalived 集群
- JAVA删除临时文件
- 自定义键盘keyfere——pcsensor
- matlab静态变量怎样分配内存,matlab中的静态变量
- ASP.NET MVC 4 小项目开发总结
- $Django Paginator分页器 批量创建数据
- 中国农业工作服行业市场供需与战略研究报告
- Underfull hbox (badness 10000) in paragraph at lines 83--86
- IDEA如何导入git仓库的分支代码
- fastdfs 报错 err: TrackerTask RecvHeader recv resp status 28 != 0
- redis入门(转)
- 第十四章 C语言头文件的编写_C语言标准库以及标准头文件
- 主板检测卡常见错误代码:00(FF)
- 基岩版服务器开启坐标显示,mc基岩版怎么看坐标 mc基岩版如何看坐标
- Win32学习笔记 - WndProc回调函数
- 骨传导耳机工作原理是什么、为什么骨传导耳机塞住耳朵声音变大?
- 基于30多万条招聘信息的热门城市、地域 、薪资、人才要求的R语言数据可视化分析
- 线性规划问题及单纯形法-单纯形法原理
- Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行
- npm/yarn 安装和命令