1、减少HTTP请求
1.1、图片地图
允许一个图片关联多个URL,目标URL取决于用户在图片上的点击位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击太阳或其他行星,注意变化:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
效果:点击不同星球跳转
1.2、CSS Sprites
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
i {
width: 30px;
height: 24px;
float: left;
background: url(images/sprite.png);
margin: 5px 10px 0 0;
}
.cat1 i {
background-position: 0 0;
}
.cat2 i {
background-position: 0 -24px;
}
.cat3 i {
background-position: 0 -48px;
}
.cat4 i {
background-position: 0 -72px;
}
</style>
</head>
<body>
<li class="cat1"><i></i>
<h3>服饰内衣</h3>
</li>
<li class="cat2"><i></i>
<h3>鞋包配饰</h3>
</li>
<li class="cat3"><i></i>
<h3>运动户外</h3>
</li>
<li class="cat4"><i></i>
<h3>珠宝手表</h3>
</li>
</body>
</html>
效果:拿到指定图标
1.3、内联图片
通过data:URL模式可以在Web页面中包含图片但无序任何HTTP请求。
data:URL是内联在页面中,在跨越不同页面时不会被缓存。最好的方法是将内联图片作为背景。将该CSS规则方在外部样式表中。意味着数据可以缓存在样式表内。
1.4、合并脚本和样式表
模块化将代码分到许多小文件中会降低性能,因为每个文件都会导致一个额外的HTTP请求。
由于每个页面所需的脚本不同,会有多脚本组合的情况,所以权衡组合是否是可管理模式十分重要。
首页访问页面时的响应事件决定这用户是否放弃你的网站还是不停的进行回访。
高性能网站建设指南目录→高性能网站建设指南——记录<首页>_SONG宋人头的博客-CSDN博客