前端优化-减少HTTP请求

作为一名前端工程师，我们身上将承担着提升用户体验者矣重大责任。前端的问题可能消耗掉整体时间的80%，所以实践前端优化是我们的一门必修课。

性能黄金法则（Performance Golden Rule）

这条法则表明了只有10%-20%的最终用户响应时间花在接收请求的HTML文档上。剩下的80%-90%的时间花在HTML文档所引用的所有的组件（图片，脚本，样式表，Flash等）进行的HTTP请求上。

因此，改善响应时间最简单途径是减少组件的数量，并由此减少HTTP请求的数量。

图片地图

如果在我们的页面中超链接带有一些文本，并被关联到目标URL上。更为美观的选择是把它关联到图片上，例如导航栏中分别有多个按钮关联不同的url地址请求。
图片地址允许我们在一个图片上关联多个URL。目标URL取决于用户点击了图片上的哪个位置。

比如上面导航栏上有五幅图片。点击一个图片会将你带到与之相关的链接。这个可以通过五个分开的超链接，使用五个分来的图片来实现。然而，使用一个图片可以更高效。这样五个HTTP请求就被减少为一个HTTP请求。响应时间会降低，因为减少了HTTP开销。

图片地图有两种类型：
1.服务器端图片地图：
将所有点击提交到同一个目标URL,向其传递用户点击的x,y坐标，web应用程序将该x,y坐标映射为适当的操作。
2.客户端图片地图：
它可以将用户点击映射到一个操作，而无需向后端应用程序发送请求。

CSS Sprites

关于雪碧图(css sprites)网上已经有非常详细的介绍，比如百度百科，最简单的来说，CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位，从而达到减少服务器请求次数的目的。