前端性能-减少Http请求

Rule1 Make fewer http requests

依据性能黄金法则，80%的时间花费在了Images,scripts,stylesheets,Flash等Http请求上，我们需要花费在这块的时间，这些技术包括使用image maps,css sprites,inline images,和合并javascript与stylesheets

image maps

如果你页面上有很多带链接的图片，image maps(图片地图)是一种减少Http请求数量的方式。一个image maps允许你在单张图片上放置相关的多个链接地址，用户点击图片上不同的区域，跳转到不同的链接页面；
有两种类型的image maps，一种是server-side image maps, 这种maps，所有的点击都请求同一个URL,并且参数附带用户点击点的x，y坐标；另一种是Client-side image maps，这种更加常用，因为用户点击不同的区域，请求不同的URL；如下

![](/img/imagemap.gif)

-- image map详细资料可查看
https://en.wikipedia.org/wiki/Image_map
-- client-side image maps的实例
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

css sprites

俗称雪碧图，具体怎么做应该都知道；说说它的益处吧，它不仅减少了Http请求数，而且相对image maps更加灵活，因为image map要求使用的图片要求图形有顺序，单sprites不需要；
另外一般人都认为合并图片会比分开的图片总量的大小要来的大，因为合并后的图片有格外增加的空白区域，事实上合并的图片反而趋于更小，因为合并的图片相对分开的图片减少了存储的信息开销，比如颜色表，格式形式等；

inline images

使用data:URL 协议使你的页面直接包含图像而不需要任何Http请求是可能的，但浏览器直到ie8才支持；格式如下

data:[][;base64],

data:不单单能使用于内联图片，任务一个指定URL的地方都能使用它，包括script和a 标签；
因为data:URLs内嵌于页面中，所以在不同页面访问中并不会缓存他们，从而增大页面的大小，一种聪明的做法是通过外联css和内容图片作为背景图设置来使内嵌图片随着css一块被缓存，在多个页面都使用到这个内嵌图片的情况下，是值得这么做的，比如网站logo；

-- 如何生成图片的base64编码
使用一些在线工具，比如这个http://www.pjhome.net/web/html5/encodeDataUrl.htm；
或者使用google chrome开发者工具，在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，点击图片，右侧就会显示该图片的 base64 编码

combined scripts and Stylesheets

理想状态下，把一个网页上引用的多个script脚本合并成一个，把引用的多个样式文件合并成一个，以此来减少http请求数，一般合并后还会有另一个步骤来减少文件大小，叫做压缩；

-- 如何合并
一般使用grunt或者gulp打包工具的童鞋都知道，都能轻松做到；