五招加速网页响应时间(4)
来源:Yeeyan 发布时间:2009-06-01 12:14:00
2. 使用CSS精灵减少HTTP请求
CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃,我的意思是爱迪生。
嗯,不大,但是非常紧凑。
CSS sprites 可以通过合并你的css背景图片,减少页面向服务的HTTP请求,轻松的降低页面的加载时间。
许多教程只是教你如何使用CSS精灵制作导航,我要说的是使用它制作整个网站的用户界面。
首先,让我们快速浏览一下YouTube,看一看他们是如何使用CSS Sprites的(如图 6)。 你不能在这里看到YouTube的CSS Sprite:
master-vfl87445.png
图 6: YouTube的 “主要的” CSS Sprite.
这是怎么做到的,使用CSS,YouTube设定了一个将这张图片作为背景(如上图)的类, 然后其他元素只需要通过css的背景位置属性background-position设定相应的类来使用这些图片。
让我们来试试,我们打算使用YouTube图片来制作一个实例。
在以下示例中,我们使YouTube标志显示在屏幕上。使用相同的使用相同的sprite类与相同的图标,制作一个简单的翻转图标。
<style>
.sprite {
background:url(/file/UploadPic/20096/1/master-vfl87445-76.png);
}
#logo {
width:100px;
height:45px;
background-position:0 0;
}
</style>
<div id="logo" class="sprite"> </div>
现在我们所作的是通过单一的HTTP请求满足所有的静态网站需求。这样可以大大降低网页加载时间。
当你使用sprites制作悬停翻转效果时图片更替看起来间隔时间非常短。不同于翻转状态时加载文件,留下大量的空白直到该文件完全被加载。
<style>
.sprite {
background:url(/file/UploadPic/20096/1/master-vfl87445-76.png);
}
#logo {
width:100px;
height:45px;
background-position:0 0;
}
#button {
background-position:0 -355px;
padding:5px 8px;
}
#button:hover{
background-position:-25px -355px;
}
</style>
<div id="logo" class="sprite"> </div>
<a href="#" id="button" class="sprite"></a>


猜你喜欢
- robots.txt文件的功能非常有限,它并不能诱使蜘蛛在你的网站上花费更多的时间或者访问更多的页面。但如果你知道robots.txt的一些
- FTP服务是Internet上的标准服务之一,用来在网络上传输文件。在linux系统中,通常用wu-ftpd来实现该服务(www.wu-ft
- 老站长就不用说了,他们有丰富的经验,作为新站长辛辛苦苦挣钱上台服务器一定要注意以下几个问题:1、除非你确认自己掌握了,否则不要去试WIN20
- 淘宝会员一次注册,两种身份!今起,淘宝网1.45亿会员将无需注册,即可直接登入淘宝网以外的电子商务平台进行购物啦!据了解,近期淘宝网开放了外
- Docker 是 dotCloud 最近几个月刚宣布的开源引擎,旨在提供一种应用程序的自动化部署解决方案,简单的说就是,在 Linux 系统
- 本文将介绍Linux系统下查看显卡硬件信息内容如下:如何在ubuntu系统中查看显卡型号。(其他文章大多只介绍了命令而未介绍如何对应显卡型号
- 微软今天凌晨发布了2009年10月份的13个月度安全补丁,一方面创下了数量上的历史记录,另一方面还首次影响到了月底才开始正式发售的Windo
- 先写一段多线程程序。 makefile 加上 -g参数生成可调式信息, 可以进行调试。 pthread不是Linux下的默认的库,也就是在
- 本文为大家分享了Ubuntu虚拟机多网卡配置,供大家参考,具体内容如下1、场景说明 系统平台:Ubuntu16.04 服务器:V
- 虽然Google的Blogspot在国内无法访问,但对于独立域名的英文博客来说,使用Blogger还是不错的选择,不用使用托管主机,这里就介
- 今天收到google以官方的名义发布的邮件,全文内容如下:如果您已经收到本期款项,请您忽略此邮件。尊敬的发布商:我们很抱歉的通知您,我们本期
- 作为一个刚刚接触linux系统的小白来说,VMware虚拟机安装好CentOS6.5系统后,纯净的系统多克隆几份出来方便后期做试验。克隆步骤
- 闲话少说!我把这几个月的经验告诉下大家为一些和我一样的草根站长指点迷津!少走点弯路!一、QQ群推广首先我要感谢腾讯,要是没有他的存在,可能就
- 1.将nginx的压缩包nginx-1.8.0.tar.gz上传到Linux服务器2.由于nginx是C语言开发的并且我们这里是通过编译ng
- 如果的Linux可以链接网络,那么可以直接联网下载。直接输入代码:wget http://Redis.googlecode.com/file
- 生成动态库: 需要的目标文件得用-fPIC选项生成.而静态库所需的目标文件可以不用-fPIC选项.例://///// static.hvoi
- 前言当我们需要对应用程序进行系能分析时,我们通常可以使用perf或者火焰图。 但是这些工具通常只能定性问题,发现那些函数占用cpu较多,需要
- Denis不愧是个WPfans,今天教我这个菜鸟如何一次安装多个wordpress blog所谓知易行难,看了他的文章,我照葫芦画瓢搞了半天
- 我们知道WIN2K系统最大的突破性和成功之一就在于它全新引入“活动目录(Active Directory)服务”,使得WIN2K系统Inte
- 打开:mode/o/template/m_article.htm查找:<td colspan="3"&g