摘要：减少http请求：图片地图、css scripts、内联图片和脚本、样式表的合并
减少http请求
图片地图-【不常用】
多个图片合成一个，根据区域不同触发不同操作。
或者一个图片有多个区域触发不同操作，不用将图片拆成多个
如，导航栏 有帮助、关于、设置等图标，变成一个图片，根据坐标触发不同操作。
1
2
3
4
5
6
7
| <img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>
|
css scripts-【即雪碧图，常用】
多个图片合成一个，根据区域不同触发不同操作。只不过是 使用css脚本控制，需要用到background-position属性
主要适用：页面背景、按钮、导航栏、链接图标等
图片截取都是从左上角的（0,0）坐标开始，所有需要把所需的图片移动想左、上移动，移动到所截取的图片的位置即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <style>
#container div{
width: 25px;
height: 25px;
color: red;
background-image: url("../../img/icon.gif");
background-repeat: no-repeat;
}
#div2{background-position:-42px 0; }
#div3{ background-position: -165px -25px; }
</style>
<title>雪碧图</title>
</head>
<body>
<div id="container">
<div></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
|
内联图片-【适当使用】
将图片编码，通html放置在一起，已达到降低请求次数。
1
2
3
4
5
6
| <img src="data:[mediatype][;base64],base64data> data - 取得数据的协定名称
mediatype:image/png - 数据类型名称
base64 - 数据的编码方法
base64data - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
|
缺点
- 浏览器不会缓存内联图片资源
- 存在大小限制
- base64编码会使图片大小增大，导致网页整体下载速度减慢
合并脚本和样式表
样式表-每个页面统一成一个
脚本-适当合并，尽量减少脚本数量
使用内容发布网络CDN
简介
CDN(Content Delivery Network)是指内容分发网络，也称为内容传送网络
功能
归纳起来，CDN具有以下主要功能：
1
2
3
4
5
| (1)节省骨干网带宽，减少带宽需求量；
(2)提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；
(3)服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；
(4)能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；
(5)降低“通信风暴”的影响，提高网络访问的稳定性。
|
基本原理
CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
