当前位置： > 网页制作 > HTML/Xhtml > 文章内容

打开网页速度提升的简单而有效的方法(2)

http://www.itjxue.com 2015-08-05 23:00 来源:未知 点击次数:

2. 使用CSS精灵减少HTTP请求

CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃，我的意思是爱迪生。

嗯，不大，但是非常紧凑。

CSS sprites 可以通过合并你的css背景图片，减少页面向服务的HTTP请求，轻松的降低页面的加载时间。

许多教程只是教你如何使用CSS精灵制作导航，我要说的是使用它制作整个网站的用户界面。

首先，让我们快速浏览一下YouTube，看一看他们是如何使用CSS Sprites的(如图 6). 你不能在这里看到YouTube的CSS Sprite:

master-vfl87445.png

YouTube screenshot of Master Sprite.

图 6: YouTube的 "主要的" CSS Sprite.

这是怎么做到的，使用CSS，YouTube设定了一个将这张图片作为背景（如上图）的类，然后其他元素只需要通过css的背景位置属性background-position设定相应的类来使用这些图片。

让我们来试试，我们打算使用YouTube图片来制作一个实例。

在以下示例中，我们使YouTube标志显示在屏幕上。使用相同的使用相同的sprite类与相同的图标,制作一个简单的翻转图标。

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

现在我们所作的是通过单一的HTTP请求满足所有的静态网站需求。这样可以大大降低网页加载时间。

当你使用sprites制作悬停翻转效果时图片更替看起来间隔时间非常短。不同于翻转状态时加载文件，留下大量的空白直到该文件完全被加载。

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.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>