CSS sprites减少HTTP请求
使用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请求的更多相关文章
- 使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
- Web优化 --利用css sprites降低图片请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中 ...
- CSS Sprites的详细使用步骤
一.把小图放在一张大图中,先排版好.上几张图看看,就比如这个: 谷歌: 淘宝: 土豆右下角悬浮框: 1.把用到的小图都放到了一张大图里,其中的小图之间的排版是有点规律的,比如说淘宝那张,类似的小图放置 ...
- Web性能优化-合并js与css,减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- CSS Sprites优缺点
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- Css Sprites 多张图片整合在一张图片上
CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
随机推荐
- python test0729.py
#!/usr/env python #-*- coding: utf-8 -*- import urllib import urllib2 import random import requests ...
- ReactJS-render
ReactJS分析之入口函数render ReactJS分析之入口函数render 前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给 ...
- mac github工具将命令当下来的代码拖入macgithub中就可以
mac github工具将命令当下来的代码拖入macgithub中就可以,刚開始傻傻的就知道点击那个加入button,总是在当下来的文件夹下创建个文件夹.并且代码不能同步
- Swift中文教程(六)--枚举和结构
原文:Swift中文教程(六)--枚举和结构 Enumerations 枚举 使用 enum 来创建一个枚举.跟Classes(类)和其他类型的命名方式一样,枚举也可以有Method(方法). enu ...
- 【地图API】为何您的坐标不准?如何纠偏?
原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. ...
- java基金会 之 HashMap统计csvWord文档
一:知识的补充( 这个HashMap Map 和 c++的Map还是有非常大的区别,惊人的差异大的人,当然,两者的作用是相同的,但函数名出一个非常大的.即使iterator的差是非常大的 ) (1)H ...
- CSS3+HTML5特效2 - 翻转效果
先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...
- webBrowser.execWB的完整说明
原文:webBrowser.execWB的完整说明 在不是js打开的页面上按window.close(), 会有提示框,很烦,现在可以不用了,没有提示框直接关闭窗口.试试下面代码: <objec ...
- 快速构建Windows 8风格应用33-构建锁屏提醒
原文:快速构建Windows 8风格应用33-构建锁屏提醒 引言 Windows Phone(8&7.5)和Windows 8引入了锁屏概念,其实做过Windows Phone 7.5应用开发 ...
- [Android 性能优化系列]降低你的界面布局层次结构的一部分
大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...