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

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>

3. 先加载CSS最后加载JavaScript

某些站点，你根本无法避开所有的扰乱了你的功能的HTTP请求。

在这方面，以下几个建议：

在body上的<head>标签里加载CSS
在</body>标签闭合前加载JavaScript .

会发生什事情呢？网页在用户的机器上加载显示，因此他们的眼睛就开始扫描所提供的内同，这个时候JavaScript正好迎头赶上在后台进行加载。

提示：如果您不想移动JavaScript标记，你认为它会搞糟网站的方式工作，我建议使用 defer 属性。用法如下：

 <script defer='defer'>


文章共3页:  [1] [2] [3] 
 
	  
	
	 





更多的打开网页速度提升的简单而有效的方法请到论坛查看:  http://BBS.TC711.COM







                     【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：

互联网

    日期：2009-11-9