1、图片地图
图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置。
1)优点:
把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数。
2)使用条件:
只有在图片的所有组成部分在页面中是紧挨在一起时才能使用,如导航栏。
3)缺点:
确定图片的坐标比较繁琐且易出错,同时使用图片地图导航也不具有可读性,因此不推荐使用图片地图。
4)实例:
导航往往使用多个分开的图片,让每个图片对应一个超链接,这会产生多个HTTP请求。
图片地图将多个图片合并为一张图片,以位置定位超链接,把HTTP请求减少为一个。
<!DOCTYPE html><html><head><title></title></head><body><img src="images/img.jpg" usemap="#myMap"/><map name="myMap"><area shape="rect" coords="50,50,100,100" href="#" οnclick="return show('Rect!')"><area shape="circle" coords="240,240,40" href="#" οnclick="return show('Circle!')"></map><script>function show(shape){alert(shape);return false;}</script></body></html>
2、CSS Sprites
CSS Sprites,CSS精灵,合并图片,通过指定CSS的backgroud-image和backgroud-position来显示元素。
工具:CSS Sprite Generator,可以合并图片,还可以生成图片的CSS样式。
<!DOCTYPE html><html><head><title></title><style>.last{ background-image:url(images/img.png); background-position:0px 0px; width:20px; height:20px; }.next{ background-image:url(images/img.png); background-position:-20px 0px; width:20px; height:20px; }.last:hover{ background-position:0px -20px; }.next:hover{ background-position:-20px -20px; }</style></head><body><div><div class="last"></div><div class="next"></div></div></body></html>
3、合并JS脚本和CSS样式表
适当地把多个JS脚本合并为一个脚本,把多个CSS样式表合并为一个样式表。
4、使用外部JS和CSS文件
在用户不带缓存访问页面的时候,内联所有的js和css的效率更快,原因是外置js和css带来额外的http请求开销,1个http请求相对于3个http请求要更快一些。
其实,使用外部JS和CSS文件会产生更快的访问速度,这是由于外部JS和CSS文件能被浏览器缓存,当下次再请求相同的JS和CSS时,浏览器将不会再发出HTTP请求,而是使用缓存的JS和CSS文件,减少了HTTP请求数。