构建高性能网站----减少页面中的http请求数

最新推荐文章于 2017-08-16 12:51:24 发布

shenshuibomb

最新推荐文章于 2017-08-16 12:51:24 发布

阅读量176

点赞数

文章标签： css sprites 图片地图网页性能优化

构建高性能网站----减少页面中的http请求数

对于互联网产品，近几年一直在听周围的产品和技术说着用户体验，尤其是Steve jobs say good bye了以后，但是什么是真正的用户体验。漂亮，fashion，吸引人当然是非常重要，但这些都是基出美工人员的设计。

那么，除了美工制作诱人的图片以外，还有什么方法来提升用户体验呢？

当用户访问你的网站时，我们总是想尽量减少用户等待时间，如果不是这样，那么Ajax技术的出现我想也没有什么必要了。

当我们访问一个网站或是一个网页时，首先要做的就是从浏览器对服务器进行一次请求，然后通过服务器的响应把从服务器上请求到的组件呈现在浏览器上。很显然，在这一过程中，我们希望时间越短越好，这样才能更快的将页面上的内容或是组件尽快的呈现给用户。

说到底就是减少网页对服务器的http请求次数，请求次数少了，时间自然就少了，但是对于互联网来说，减少网页中组件数量又不太可能，尤其是对于那些复杂又看上去绚丽的网页来说。正因为这样，所以我们在开发网页的时候，就需要前端设计人员进行一些技巧上的处理。

一．图片地图

图片地图允许你把一个图片分割成多个部分，然后在每个分割的部分上添加自己的事件。

如你正在使用导航栏或是图片导航这类的应用，使用这种方法，服务器只产生一次http请求，避免了多个图片产生多个http请求的情况，并且实现起来也比较简单。

例子如下：

我有一幅忍者神龟的图片，我在这四个小龟脑袋上针对不同的忍者神龟添加四个alert

<html>
	<head>
    <title>构建高性能网站-减少页面中的http请求数-图片地图</title>
    </head>
<body>
  <img src="TMNT.jpg" border="0" usemap="#TMNTmap" alt="TMNT" />
  <map name="TMNTmap" id="TMNTmap">
 <!-- coords 圆心加半径 rect 左上角的坐标到右下角的坐标-->
  <area shape="circle" coords="273,373,50" href ="javascript:alert('这是第一只龟');" alt="First"/>
  <area shape="circle" coords="442,375,50" href ="javascript:alert('这是第二只龟');" alt="Second"/>
  <area shape="circle" coords="563,382,50" href ="javascript:alert('这是第三只龟');" alt="Third"/>
  <area shape="rect" coords="688,344,780,415" href ="javascript:alert('这是第四只龟');" alt="Fourth"/>
  </map>
</body>
</html>

这里主要使用的就是html中的<map>和<area>标签。

一．CSS Sprites

CSS Sprites比图片地图更加灵活，它可以在网页中的任何一个位置显示某一张图

片的某一个部分。

还用我的忍者神龟为例，在图片地图中我们在每一个龟脑袋上都添加了js事件。

现在我们把这四个小王八从上到下的顺序排列

效果如图:

<html>
	<head>
	    <title>构建高性能网站-减少页面中的http请求数-CSS Sprites</title>
		<style>
		  #First{
		  	background-image:url(TMNT.jpg);
		  	background-position:-230px -335px;
		  	width:90px;
		  	height:70px;
		  }
		  #Second{
		  	background-image:url(TMNT.jpg);
		  	background-position:-400px -341px;
		  	width:90px;
		  	height:70px;
		  }
		  #Third{
		  	background-image:url(TMNT.jpg);
		  	background-position:-518px -340px;
		  	width:90px;
		  	height:70px;
		  }
		  #Fourth{
		  	background-image:url(TMNT.jpg);
		  	background-position:-686px -342px;
		  	width:90px;
		  	height:70px;
		  }
		</style>
	</head>
	<body>
	<div id="First"></div>
	<div id="Second"></div>
	<div id="Third"></div>
	<div id="Fourth"></div>
	</body>
</html>

区别：

图片地图是把一张图片分割成不同的区域，在不同的区域上可以增加单独的事件。

Css sprites是可以把一张图片将某一部分裁剪下来显示到不同的元素上去，甚至可以让其显示

成一幅新图。