浅谈前端性能优化（五）——减少HTTP请求数

最新推荐文章于 2024-02-18 10:31:54 发布

筱葭

最新推荐文章于 2024-02-18 10:31:54 发布

阅读量5.9k

点赞数 3

分类专栏： Web 文章标签：前端性能优化减少HTTP请求数

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/71331932

版权

Web 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

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请求数。

筱葭

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈前端性能优化（五）——减少HTTP请求数

1、图片地图图片地图允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。1) 优点：把多张图片整合到一张图片中，虽然文件的总体大小不变，但可以减少HTTP请求数。2) 使用条件：只有在图片的所有组成部分在页面中是紧挨在一起时才能使用，如导航栏。3) 缺点：确定图片的坐标比较繁琐且易出错，同时使用图片地图导航也不具有可读性，因此不推荐使用图片地图。
复制链接

扫一扫