大型网站优化技术之减少HTTP请求之合并图片详解

　　看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。

　　减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。

　　这里我们就拿雅虎的第一条建议：尽量减少HTTP请求数里的减少图片请求数量 进行讲解。

　　我们都知道，一个网站的一个页面可能有很多小图标，例如一些按钮、箭头等等。 当加载html文档时，只要遇到有图片的，都会自动建立起HTTP请求下载，然后将图片下载到页面上，这些小图片可能也就是十几K大甚至1K都不到，假如 我们的一个页面有一百个小图标，我们在加载页面时，就要发送100个HTTP请求，如果你的网站访问量很大并发量也很高，假如上百万访问量，那发起的请求 就是千万级别了，服务器是有一定的压力的，并且一个用户的一个页面要发起那么多请求，是很耗时的。

　　所以，我们优化的方案就是：将这些十几K、几K的小图标合并在一张图片里，然后用CSS的background-image和background-position属性来定位要显示的部分。

　　二、代码实现

　　1、思路：

　　　　将一个文件夹里的图标，自动生成在一张图片里面，同时自动生成对应的css文件，我们只要在HTML里的标签中添加相应的属性值就能显示图片了。

　　2、实现过程：

调用以上代码，我们的浏览器是这样显示的：

　　然后css目录生成了Pink.css文件：

　　img目录下生成了Pink.png文件：

　　看看生成的背景图是长啥样子：

　　接下来我们再看一下所生成的图片大小与Pink文件夹里所有小图片总和的大小，对它们做个比较：

　　从上图可以看出，我们生成的图片的大小明显小于文件夹所有图片的大小，所以在将100个小图标下载下来的速度 会明显小于 将背景图下载下来和将CSS下载下来的速度。

　　当访问量大时，或者小图片的量大时，会起到很明显的优化效果！！！

　　代码中的每一个点都基本上有注释，很方便大家去理解，只要大家用心去看，肯定能将这一网站优化技术用到自己的项目中。