网站运营
位置:首页>> 网站运营>> 五招加速网页响应时间(4)

五招加速网页响应时间(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>

0
投稿

猜你喜欢

手机版 网站运营 asp之家 www.aspxhome.com